@graphcommerce/framer-scroller 9.0.0-canary.98 → 9.0.0

package/components/MotionImageAspect.tsx

@@ -1,4 +1,5 @@
-import { Image, ImageProps } from '@graphcommerce/image'
+import type { ImageProps } from '@graphcommerce/image'
+import { Image } from '@graphcommerce/image'
 import { Box } from '@mui/material'
 import { m } from 'framer-motion'
 import { forwardRef } from 'react'
@@ -12,7 +13,7 @@ export type MotionImageAspectProps = Omit<ImageProps, 'layout' | 'unoptimized'>
  * Note: We have a fallback for Safari 14 which doesn't yet support aspect-ratio, this causes a
  * problem when the layout is animated. Should be fixed in Safari 15
  */
-export const MotionImageAspect = m(
+export const MotionImageAspect = m.create(
   forwardRef<HTMLImageElement, MotionImageAspectProps>((props, ref) => (
     <Box
       className='MotionImageAspect'

package/components/Scroller.tsx

@@ -1,7 +1,9 @@
-import { styled, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { styled } from '@mui/material'
 import { m } from 'framer-motion'
 import { forwardRef } from 'react'
-import { ScrollableProps, useScroller } from '../hooks/useScroller'
+import type { ScrollableProps } from '../hooks/useScroller'
+import { useScroller } from '../hooks/useScroller'
 
 const ScrollerDiv = styled(m.div)({})
 

package/components/ScrollerBar.tsx

@@ -1,6 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { extendableComponent } from '@graphcommerce/next-ui/Styles'
-import { styled, SxProps, Theme, useTheme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { styled, useTheme } from '@mui/material'
 import { m, transform, useTransform } from 'framer-motion'
 import { useRef } from 'react'
 import { useScrollerContext } from '../hooks/useScrollerContext'
@@ -10,7 +11,7 @@ type OwnerProps = {
   direction: 'x' | 'y'
 }
 
-type ScrollerBarProps = OwnerProps & {
+export type ScrollerBarProps = OwnerProps & {
   sx?: SxProps<Theme>
 }
 
@@ -36,6 +37,7 @@ const Scroll = styled(m.button)({
   height: 7,
 })
 
+/** @public */
 export function ScrollerBar(props: ScrollerBarProps) {
   const { direction, sx } = props
   const control = useScrollerControl()
@@ -52,7 +54,7 @@ export function ScrollerBar(props: ScrollerBarProps) {
 
   const scrollProgress = scroll[`${direction}Progress`]
 
-  const thumbSize = useTransform(scrollProgress, (directionProgress) => {
+  const thumbSize = useTransform(scrollProgress, () => {
     if (!scrollerRef.current) return 0
     const trackWidth = scrollerRef.current[offsetSize]
     return trackWidth * (trackWidth / scrollerRef.current[scrollSize])

package/components/ScrollerButton.tsx

@@ -1,10 +1,11 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Fab, FabProps, styled, SxProps, Theme } from '@mui/material'
+import type { FabProps, SxProps, Theme } from '@mui/material'
+import { Fab, styled } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import React from 'react'
 import { useScrollTo } from '../hooks/useScrollTo'
 import { useScrollerContext } from '../hooks/useScrollerContext'
-import { SnapPositionDirection } from '../types'
+import type { SnapPositionDirection } from '../types'
 
 const MotionDiv = styled(m.div)({})
 
@@ -15,7 +16,7 @@ export type ScrollerButtonProps = {
   showButtons?: 'auto' | 'desktopAuto' | 'always' | 'desktopAlways' | 'never'
 } & FabProps
 
-export const ScrollerButton = m(
+export const ScrollerButton = m.create(
   React.forwardRef<HTMLDivElement, ScrollerButtonProps>((props, ref) => {
     const {
       direction,

package/components/ScrollerDot.tsx

@@ -2,11 +2,12 @@ import { useMotionValueValue } from '@graphcommerce/framer-utils'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { extendableComponent } from '@graphcommerce/next-ui/Styles'
 import { i18n } from '@lingui/core'
-import { Fab, FabProps, styled } from '@mui/material'
+import type { FabProps } from '@mui/material'
+import { Fab, styled } from '@mui/material'
 import { m } from 'framer-motion'
 import { useScrollTo } from '../hooks/useScrollTo'
 import { useScrollerContext } from '../hooks/useScrollerContext'
-import { ItemState } from '../types'
+import type { ItemState } from '../types'
 
 const name = 'ScrollerDot'
 const parts = ['dot', 'circle'] as const
@@ -14,7 +15,7 @@ type OwnerProps = { active: boolean }
 
 const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
 
-type ScrollerDotProps = Omit<FabProps, 'onClick' | 'className'> & ItemState & { idx: number }
+export type ScrollerDotProps = Omit<FabProps, 'onClick' | 'className'> & ItemState & { idx: number }
 
 const MotionBox = styled(m.div)({})
 

package/components/ScrollerDots.tsx

@@ -1,7 +1,8 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { extendableComponent } from '@graphcommerce/next-ui/Styles'
-import { Box, FabProps, SxProps, Theme } from '@mui/material'
+import type { FabProps, SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import { m } from 'framer-motion'
 import React from 'react'
 import { useScrollerContext } from '../hooks/useScrollerContext'
@@ -15,7 +16,7 @@ export type DotsProps = {
 const componentName = 'ScrollerDots'
 const { classes } = extendableComponent(componentName, ['root', 'dot', 'circle'] as const)
 
-export const ScrollerDots = m(
+export const ScrollerDots = m.create(
   React.forwardRef<HTMLDivElement, DotsProps>((props, ref) => {
     const { fabProps, sx = [], ...containerProps } = props
 

package/components/ScrollerPageCounter.tsx

@@ -1,5 +1,6 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { styled, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { styled } from '@mui/material'
 import { m } from 'framer-motion'
 import React, { useState } from 'react'
 import { useScrollerContext } from '../hooks/useScrollerContext'

package/components/ScrollerProvider.tsx

@@ -1,17 +1,18 @@
 import { useConstant, useElementScroll } from '@graphcommerce/framer-utils'
-import { MotionValue, motionValue, Point, useDomEvent, useMotionValue } from 'framer-motion'
-import { PlaybackControls } from 'popmotion'
-import React, { useEffect, useRef, useMemo, useCallback } from 'react'
+import type { MotionValue, Point } from 'framer-motion'
+import { motionValue, useDomEvent, useMotionValue } from 'framer-motion'
+import type { PlaybackControls } from 'popmotion'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { scrollerContext } from '../context/scrollerContext'
-import {
+import type {
   Axis,
   ItemState,
   ReactHtmlRefObject,
-  ScrollerContext,
   ScrollSnapAlign,
   ScrollSnapAlignAxis,
   ScrollSnapStop,
   ScrollSnapType,
+  ScrollerContext,
   SnapPositionList,
 } from '../types'
 

package/components/ScrollerThumbnail.tsx

@@ -1,5 +1,6 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Image, ImageProps } from '@graphcommerce/image'
+import type { ImageProps } from '@graphcommerce/image'
+import { Image } from '@graphcommerce/image'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { extendableComponent, responsiveVal } from '@graphcommerce/next-ui/Styles'
 import { alpha, styled, useTheme } from '@mui/material'
@@ -13,7 +14,7 @@ type OwnerProps = { active: boolean }
 
 const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
 
-type ScrollerThumbnailProps = {
+export type ScrollerThumbnailProps = {
   idx: number
   image: Pick<ImageProps, 'src' | 'height' | 'width'>
   layoutDependency: boolean
@@ -44,7 +45,7 @@ export function ScrollerThumbnail(props: ScrollerThumbnailProps) {
         theme.palette.primary.main,
         theme.palette.action.hoverOpacity,
       )}`,
-      `inset 0 0 0 2px #ffffff00, 0 0 0 4px #ffffff00`,
+      'inset 0 0 0 2px #ffffff00, 0 0 0 4px #ffffff00',
     ],
   )
 
@@ -53,8 +54,15 @@ export function ScrollerThumbnail(props: ScrollerThumbnailProps) {
   const scrollIntoView = () =>
     ref.current?.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' })
 
+  const initialRender = useRef(true)
+
   useEffect(() => {
     if (active && ref.current) {
+      // Skip scrollIntoView on initial render
+      if (initialRender.current) {
+        initialRender.current = false
+        return
+      }
       // This is a hack to ensure that the scroll animation is finished.
       setTimeout(() => scrollIntoView(), 1)
     }

package/components/ScrollerThumbnails.tsx

@@ -1,5 +1,5 @@
-import { ImageProps } from '@graphcommerce/image'
-import { ButtonProps, SxProps, Theme } from '@mui/material'
+import type { ImageProps } from '@graphcommerce/image'
+import type { ButtonProps, SxProps, Theme } from '@mui/material'
 import { ScrollerThumbnail } from './ScrollerThumbnail'
 import { ThumbnailContainer } from './ThumbnailContainer'
 

package/components/ThumbnailContainer.tsx

@@ -1,10 +1,12 @@
-import { styled, SxProps, Theme } from '@mui/material'
-import { m, PanHandlers } from 'framer-motion'
+import type { SxProps, Theme } from '@mui/material'
+import { styled } from '@mui/material'
+import type { PanHandlers } from 'framer-motion'
+import { m } from 'framer-motion'
 import React, { useRef } from 'react'
 
 const MotionBox = styled(m.div)({})
 
-type ThumbnailContainerProps = {
+export type ThumbnailContainerProps = {
   children: React.ReactNode
   sx?: SxProps<Theme>
   layoutDependency: boolean

package/context/scrollerContext.ts

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ScrollerContext } from '../types'
+import type { ScrollerContext } from '../types'
 
 export const scrollerContext = React.createContext(undefined as unknown as ScrollerContext)
 scrollerContext.displayName = 'scrollerContext'

package/hooks/useScrollTo.ts

@@ -1,4 +1,5 @@
-import { MotionConfigContext, Point, Tween } from 'framer-motion'
+import type { Point, Tween } from 'framer-motion'
+import { MotionConfigContext } from 'framer-motion'
 import { animate } from 'popmotion'
 import { useCallback, useContext } from 'react'
 import { distanceAnimationDuration } from '../utils/distanceAnimationDuration'
@@ -40,20 +41,20 @@ export function useScrollTo() {
         (Math.round(ref.scrollLeft) !== to.x || Math.round(ref.scrollTop) !== to.y)
       ) {
         console.warn(
-          `scrollTo triggered while another animation is in progress. This cancels the current animation and creates a new one.`,
+          'scrollTo triggered while another animation is in progress. This cancels the current animation and creates a new one.',
         )
       }
 
       if (process.env.NODE_ENV === 'development' && __retrigger > 5) {
         console.error(
-          `scrollTo triggered more than 5 times, is the element resizing constantly? Bailing out.`,
+          'scrollTo triggered more than 5 times, is the element resizing constantly? Bailing out.',
         )
         return
       }
 
       if (process.env.NODE_ENV === 'development' && __retrigger > 0) {
         console.warn(
-          `scrollTo re-animating to because the final location changed during animation.`,
+          'scrollTo re-animating to because the final location changed during animation.',
         )
       }
 

package/hooks/useScroller.ts

@@ -1,18 +1,15 @@
 import { useConstant, useMotionValueValue } from '@graphcommerce/framer-utils'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { extendableComponent } from '@graphcommerce/next-ui/Styles'
-import { SxProps, Theme } from '@mui/material'
-import {
-  HTMLMotionProps,
-  motionValue,
-  MotionValue,
-  PanHandlers,
-  PanInfo,
-  useTransform,
-} from 'framer-motion'
-import React, { MouseEventHandler, ReactHTML, useEffect, useState } from 'react'
+import type { SxProps, Theme } from '@mui/material'
+import type { HTMLMotionProps, MotionValue, PanHandlers, PanInfo } from 'framer-motion'
+import { motionValue, useTransform } from 'framer-motion'
+import type { MouseEventHandler, ReactHTML } from 'react'
+import type React from 'react'
+import { useEffect, useState } from 'react'
 import { isHTMLMousePointerEvent } from '../utils/isHTMLMousePointerEvent'
-import { scrollSnapTypeDirection, SnapTypeDirection } from '../utils/scrollSnapTypeDirection'
+import type { SnapTypeDirection } from '../utils/scrollSnapTypeDirection'
+import { scrollSnapTypeDirection } from '../utils/scrollSnapTypeDirection'
 import { useScrollerContext } from './useScrollerContext'
 import { useVelocitySnapTo } from './useVelocitySnapTo'
 
@@ -23,6 +20,7 @@ export type ScrollableProps<TagName extends keyof ReactHTML = 'div'> = Omit<
   hideScrollbar?: boolean
   grid?: boolean
   children: React.ReactNode
+  disableDrag?: boolean
 }
 
 type OwnerProps = {
@@ -36,7 +34,8 @@ type OwnerProps = {
   canGrab: boolean
   grid: boolean
 }
-const name = 'Scroller' as const
+
+const name = 'Scroller'
 const parts = ['root'] as const
 const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
 
@@ -45,7 +44,7 @@ export function useScroller<
   TagName extends keyof ReactHTML = 'div',
   E extends HTMLElement = HTMLElement,
 >(props: ScrollableProps<TagName>, forwardedRef: React.ForwardedRef<E>) {
-  const { hideScrollbar = false, children, grid = false, ...divProps } = props
+  const { hideScrollbar = false, children, grid = false, disableDrag, ...divProps } = props
 
   const { scrollSnap, scrollerRef, disableSnap, snap, registerChildren, scroll } =
     useScrollerContext()
@@ -55,10 +54,7 @@ export function useScroller<
   }, [children, registerChildren])
 
   const canGrab = useMotionValueValue(
-    useTransform(
-      [scroll.xMax, scroll.yMax] as MotionValue<string | number>[],
-      ([xMax, yMax]: number[]) => xMax || yMax,
-    ),
+    useTransform(() => !disableDrag && (scroll.xMax.get() || scroll.yMax.get())),
     (v) => !!v,
   )
 
@@ -70,6 +66,8 @@ export function useScroller<
 
   const scrollStart = useConstant(() => ({ x: motionValue(0), y: motionValue(0) }))
   const onPanStart: PanHandlers['onPanStart'] = (event) => {
+    if (disableDrag) return
+
     // If we're not dealing with the mouse we don't need to do anything
     if (!isHTMLMousePointerEvent(event)) return
 
@@ -98,6 +96,8 @@ export function useScroller<
   }
 
   const onPan: PanHandlers['onPan'] = (event, info: PanInfo) => {
+    if (disableDrag) return
+
     if (!scrollerRef.current) return
 
     // If we're not dealing with the mouse we don't need to do anything
@@ -111,6 +111,8 @@ export function useScroller<
   }
 
   const onPanEnd: PanHandlers['onPanEnd'] = (event, info) => {
+    if (disableDrag) return
+
     // If we're not dealing with the mouse we don't need to do anything
     if (!isHTMLMousePointerEvent(event)) return
     if (!isPanning) return
@@ -208,7 +210,7 @@ export function useScroller<
       [theme.breakpoints.down('md')]: {
         display: 'grid',
         gridAutoFlow: 'row',
-        gridAutoColumns: `40%`,
+        gridAutoColumns: '40%',
         '& > *': {
           scrollSnapAlign: scrollSnap.scrollSnapAlign,
           scrollSnapStop: scrollSnap.scrollSnapStop,
@@ -219,7 +221,7 @@ export function useScroller<
       [theme.breakpoints.down('md')]: {
         display: 'grid',
         gridAutoFlow: 'column',
-        gridAutoRows: `40%`,
+        gridAutoRows: '40%',
         gridTemplateRows: 'auto',
         '& > *': {
           scrollSnapAlign: scrollSnap.scrollSnapAlign,
@@ -232,7 +234,7 @@ export function useScroller<
       [theme.breakpoints.up('md')]: {
         display: 'grid',
         gridAutoFlow: 'row',
-        gridAutoColumns: `40%`,
+        gridAutoColumns: '40%',
         '& > *': {
           scrollSnapAlign: scrollSnap.scrollSnapAlign,
           scrollSnapStop: scrollSnap.scrollSnapStop,
@@ -243,7 +245,7 @@ export function useScroller<
       [theme.breakpoints.up('md')]: {
         display: 'grid',
         gridAutoFlow: 'column',
-        gridAutoRows: `40%`,
+        gridAutoRows: '40%',
         gridTemplateRows: 'auto',
         '& > *': {
           scrollSnapAlign: scrollSnap.scrollSnapAlign,

package/hooks/useScrollerContext.ts

@@ -1,6 +1,6 @@
 import { useContext } from 'react'
 import { scrollerContext } from '../context/scrollerContext'
-import { ScrollerContext } from '../types'
+import type { ScrollerContext } from '../types'
 
 export function useScrollerContext(): ScrollerContext {
   return useContext(scrollerContext)

package/hooks/useScrollerControl.ts

@@ -1,5 +1,5 @@
 import { useConstant } from '@graphcommerce/framer-utils'
-import { PanInfo, Point } from 'framer-motion'
+import type { PanInfo, Point } from 'framer-motion'
 import { useScrollerContext } from './useScrollerContext'
 import { useVelocitySnapTo } from './useVelocitySnapTo'
 

package/hooks/useVelocitySnapTo.ts

@@ -1,7 +1,8 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useMatchMedia } from '@graphcommerce/next-ui/hooks/useMatchMedia'
-import { PanInfo } from 'framer-motion'
-import { inertia, InertiaOptions } from 'popmotion'
+import type { PanInfo } from 'framer-motion'
+import type { InertiaOptions } from 'popmotion'
+import { inertia } from 'popmotion'
 import { scrollSnapTypeDirection } from '../utils/scrollSnapTypeDirection'
 import { useScrollerContext } from './useScrollerContext'
 
@@ -43,7 +44,7 @@ export const useVelocitySnapTo = (
 
   const animatePan = async (info: LimitedPanInfo) => {
     const el = ref.current
-    if (!el) throw Error(`Can't find html element`)
+    if (!el) throw Error("Can't find html element")
 
     const { scrollLeft, scrollTop } = el
 

package/hooks/useWatchItems.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { ItemState } from '../types'
+import type { ItemState } from '../types'
 import { useScrollerContext } from './useScrollerContext'
 
 export function useWatchItems(callback: (item: ItemState, items: ItemState[]) => void) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-scroller",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.98",
+  "version": "9.0.0",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -18,15 +18,15 @@
     "popmotion": "11.0.5"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.98",
-    "@graphcommerce/framer-utils": "^9.0.0-canary.98",
-    "@graphcommerce/image": "^9.0.0-canary.98",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.98",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.98",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0",
+    "@graphcommerce/framer-utils": "^9.0.0",
+    "@graphcommerce/image": "^9.0.0",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0",
     "@lingui/core": "^4.2.1",
     "@lingui/react": "^4.2.1",
     "@mui/material": "^5.10.16",
-    "framer-motion": "^10.0.0",
+    "framer-motion": "^11.0.0",
     "next": "*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package/types.ts

@@ -1,7 +1,7 @@
-import { ScrollMotionValues } from '@graphcommerce/framer-utils'
-import { MotionValue, Point } from 'framer-motion'
-import { PlaybackControls } from 'popmotion'
-import React from 'react'
+import type { ScrollMotionValues } from '@graphcommerce/framer-utils'
+import type { MotionValue, Point } from 'framer-motion'
+import type { PlaybackControls } from 'popmotion'
+import type React from 'react'
 
 export type ItemState = {
   el?: HTMLElement

package/utils/scrollSnapTypeDirection.ts

@@ -1,4 +1,4 @@
-import { ScrollSnapType } from '../types'
+import type { ScrollSnapType } from '../types'
 
 export type SnapTypeDirection = 'block' | 'inline' | 'both'
 export function scrollSnapTypeDirection(scrollSnapType: ScrollSnapType): SnapTypeDirection {