@graphcommerce/framer-scroller 2.1.14 → 2.1.15

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 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

package/components/ScrollerButton.tsx

@@ -1,6 +1,6 @@
-import { useElementScroll } from '@graphcommerce/framer-utils'
+import { useElementScroll, useMotionValueValue } from '@graphcommerce/framer-utils'
 import { Fab, FabProps } from '@mui/material'
-import { m, useSpring, useTransform } from 'framer-motion'
+import { m, useMotionTemplate, useSpring, useTransform } from 'framer-motion'
 import React from 'react'
 import { useScrollTo } from '../hooks/useScrollTo'
 import { useScrollerContext } from '../hooks/useScrollerContext'
@@ -8,11 +8,12 @@ import { SnapPositionDirection } from '../types'
 
 export type ScrollerButtonProps = {
   direction: SnapPositionDirection
+  layout?: boolean
 } & FabProps
 
 export const ScrollerButton = m(
   React.forwardRef<HTMLDivElement, ScrollerButtonProps>((props, ref) => {
-    const { direction, sx = [], ...buttonProps } = props
+    const { direction, sx = [], layout, ...buttonProps } = props
 
     const { getSnapPosition, scrollerRef } = useScrollerContext()
     const scrollTo = useScrollTo()
@@ -39,20 +40,30 @@ export const ScrollerButton = m(
         }
       },
     )
-    const scale = useSpring(progress)
+
+    const scale = useMotionValueValue(progress, (v) => v)
 
     return (
-      <m.div ref={ref} style={{ scale, opacity: scale, willChange: 'scale, opacity', zIndex: 1 }}>
+      <m.div ref={ref} layout={layout}>
         <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: scale,
+              transform: `scale(${scale})`,
+            },
+            ...(Array.isArray(sx) ? sx : [sx]),
+          ]}
         />
       </m.div>
     )
   }),
 )
+
 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.14",
+  "version": "2.1.15",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -17,7 +17,7 @@
   "dependencies": {
     "@graphcommerce/framer-utils": "3.1.3",
     "@graphcommerce/image": "3.1.6",
-    "@graphcommerce/next-ui": "4.8.3"
+    "@graphcommerce/next-ui": "4.8.4"
   },
   "devDependencies": {
     "@graphcommerce/eslint-config-pwa": "^4.1.7",