@graphcommerce/framer-scroller 2.1.15 → 2.1.16

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 2.1.16
+
+### Patch Changes
+
+- [#1511](https://github.com/graphcommerce-org/graphcommerce/pull/1511) [`ddb6d6329`](https://github.com/graphcommerce-org/graphcommerce/commit/ddb6d6329bfad361b2fbe96402ca2bfc0ab3d98c) Thanks [@paales](https://github.com/paales)! - make sure the header is clickable when no forward/prev buttons are shown
+
+* [#1490](https://github.com/graphcommerce-org/graphcommerce/pull/1490) [`d311ef48b`](https://github.com/graphcommerce-org/graphcommerce/commit/d311ef48bb3e97806d992af5516d6b7f183ec9cb) Thanks [@paales](https://github.com/paales)! - upgraded packages
+
+* Updated dependencies [[`a9213f1f5`](https://github.com/graphcommerce-org/graphcommerce/commit/a9213f1f5a410d217768386ccb6d9b5ce7bd5782), [`d311ef48b`](https://github.com/graphcommerce-org/graphcommerce/commit/d311ef48bb3e97806d992af5516d6b7f183ec9cb)]:
+  - @graphcommerce/next-ui@4.9.0
+  - @graphcommerce/framer-utils@3.1.4
+  - @graphcommerce/image@3.1.7
+
 ## 2.1.15
 
 ### Patch Changes

package/components/ScrollerButton.tsx

@@ -1,19 +1,22 @@
 import { useElementScroll, useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Fab, FabProps } from '@mui/material'
-import { m, useMotionTemplate, useSpring, useTransform } from 'framer-motion'
+import { Fab, FabProps, styled, SxProps, Theme } 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'
 
+const MotionDiv = styled(m.div)({})
+
 export type ScrollerButtonProps = {
   direction: SnapPositionDirection
   layout?: boolean
+  sxContainer?: SxProps<Theme>
 } & FabProps
 
 export const ScrollerButton = m(
   React.forwardRef<HTMLDivElement, ScrollerButtonProps>((props, ref) => {
-    const { direction, sx = [], layout, ...buttonProps } = props
+    const { direction, sx = [], layout, className, sxContainer, ...buttonProps } = props
 
     const { getSnapPosition, scrollerRef } = useScrollerContext()
     const scrollTo = useScrollTo()
@@ -21,30 +24,22 @@ export const ScrollerButton = m(
 
     const { xProgress, yProgress, xMax, yMax } = useElementScroll(scrollerRef)
 
-    const progress = useTransform<number, number>(
-      [xProgress, yProgress, xMax, yMax],
-      ([x, y, xM, yM]) => {
+    const visibility = useMotionValueValue(
+      useTransform<number, number>([xProgress, yProgress, xMax, yMax], ([x, y, xM, yM]) => {
         if (xM === 0 && yM === 0) return 0
 
-        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
-        }
-      },
-    )
+        if (direction === 'left') return x < 0.1 ? 0 : 1
+        if (direction === 'right') return x > 0.9 ? 0 : 1
+        if (direction === 'up') return y < 0.1 ? 0 : 1
+        if (direction === 'down') return y > 0.9 ? 0 : 1
 
-    const scale = useMotionValueValue(progress, (v) => v)
+        return 0
+      }),
+      (v) => v,
+    )
 
     return (
-      <m.div ref={ref} layout={layout}>
+      <MotionDiv ref={ref} layout={layout} sx={sxContainer} className={className}>
         <Fab
           type='button'
           size='small'
@@ -55,13 +50,13 @@ export const ScrollerButton = m(
             {
               display: { xs: 'none', md: 'flex' },
               transition: 'all 250ms',
-              opacity: scale,
-              transform: `scale(${scale})`,
+              opacity: visibility,
+              transform: `scale(${visibility})`,
             },
             ...(Array.isArray(sx) ? sx : [sx]),
           ]}
         />
-      </m.div>
+      </MotionDiv>
     )
   }),
 )

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-scroller",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "2.1.15",
+  "version": "2.1.16",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -15,12 +15,12 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "3.1.3",
-    "@graphcommerce/image": "3.1.6",
-    "@graphcommerce/next-ui": "4.8.4"
+    "@graphcommerce/framer-utils": "3.1.4",
+    "@graphcommerce/image": "3.1.7",
+    "@graphcommerce/next-ui": "4.9.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.7",
+    "@graphcommerce/eslint-config-pwa": "^4.1.8",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.3",
     "@playwright/test": "^1.21.1"
@@ -30,9 +30,9 @@
     "@lingui/react": "^3.13.2",
     "@lingui/core": "^3.13.2",
     "framer-motion": "^6.2.4",
-    "next": "12.1.2",
+    "next": "^12.1.2",
     "popmotion": "11.0.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }