@graphcommerce/framer-scroller 2.1.13 → 2.1.16

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # 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
+
+- [#1509](https://github.com/graphcommerce-org/graphcommerce/pull/1509) [`0ab7c5465`](https://github.com/graphcommerce-org/graphcommerce/commit/0ab7c5465441cba9bf8cd185a6790ce2f443f4ed) Thanks [@paales](https://github.com/paales)! - SidebarGallery improvements (product page):
+
+  - Prevent vertical scrolling
+  - Disable zoom fab when there are no images
+  - Hide scroller dots when there in only one image
+  - Make sure the prev/next buttons are shown as expected
+
+- Updated dependencies [[`0ab7c5465`](https://github.com/graphcommerce-org/graphcommerce/commit/0ab7c5465441cba9bf8cd185a6790ce2f443f4ed)]:
+  - @graphcommerce/next-ui@4.8.4
+
+## 2.1.14
+
+### Patch Changes
+
+- Updated dependencies [[`afc67103d`](https://github.com/graphcommerce-org/graphcommerce/commit/afc67103d0e00583e274465036fd287537f95e79)]:
+  - @graphcommerce/next-ui@4.8.3
+
 ## 2.1.13
 
 ### Patch Changes

package/components/ScrollerButton.tsx

@@ -1,18 +1,22 @@
-import { useElementScroll } from '@graphcommerce/framer-utils'
-import { Fab, FabProps } from '@mui/material'
-import { m, useSpring, useTransform } from 'framer-motion'
+import { useElementScroll, useMotionValueValue } from '@graphcommerce/framer-utils'
+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 = [], ...buttonProps } = props
+    const { direction, sx = [], layout, className, sxContainer, ...buttonProps } = props
 
     const { getSnapPosition, scrollerRef } = useScrollerContext()
     const scrollTo = useScrollTo()
@@ -20,39 +24,41 @@ 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
+
+        return 0
+      }),
+      (v) => v,
     )
-    const scale = useSpring(progress)
 
     return (
-      <m.div ref={ref} style={{ scale, opacity: scale, willChange: 'scale, opacity', zIndex: 1 }}>
+      <MotionDiv ref={ref} layout={layout} sx={sxContainer} className={className}>
         <Fab
           type='button'
           size='small'
           {...buttonProps}
           onClick={handleClick}
           aria-label={direction}
-          sx={[{ display: { xs: 'none', md: 'flex' } }, ...(Array.isArray(sx) ? sx : [sx])]}
+          sx={[
+            {
+              display: { xs: 'none', md: 'flex' },
+              transition: 'all 250ms',
+              opacity: visibility,
+              transform: `scale(${visibility})`,
+            },
+            ...(Array.isArray(sx) ? sx : [sx]),
+          ]}
         />
-      </m.div>
+      </MotionDiv>
     )
   }),
 )
+
 ScrollerButton.displayName = 'ScrollerButton'

package/components/ScrollerDots.tsx

@@ -23,6 +23,8 @@ export const ScrollerDots = m(
     const { items } = useScrollerContext()
     const itemsArr = useMotionValueValue(items, (v) => v)
 
+    if (itemsArr.length <= 1) return null
+
     return (
       <MotionBox
         {...containerProps}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-scroller",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "2.1.13",
+  "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.2"
+    "@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"
   }
 }