@graphcommerce/framer-scroller 5.2.0-canary.12 → 5.2.0-canary.14

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## 5.2.0-canary.14
+
+## 5.2.0-canary.13
+
 ## 5.2.0-canary.12
 
 ## 5.2.0-canary.11

package/components/ScrollerButton.tsx

@@ -28,8 +28,8 @@ export const ScrollerButton = m(
       useTransform<number, number>([xProgress, yProgress, xMax, yMax], ([x, y, xM, yM]) => {
         if (xM === 0 && yM === 0) return 0
 
-        if (direction === 'left') return x < 0.1 ? 0 : 1
-        if (direction === 'right') return x > 0.9 ? 0 : 1
+        if (direction === 'left') return x < 0.01 ? 0 : 1
+        if (direction === 'right') return x > 0.99 ? 0 : 1
         if (direction === 'up') return y < 0.1 ? 0 : 1
         if (direction === 'down') return y > 0.9 ? 0 : 1
 

package/components/ScrollerDot.tsx

@@ -41,14 +41,17 @@ export function ScrollerDot(props: ScrollerDotProps) {
       sx={{
         boxShadow: 'none',
         background: 'transparent',
+        aspectRatio: '1/1',
+        height: 'auto',
+        minHeight: 'auto',
       }}
     >
       <MotionBox
         className={classes.circle}
         sx={(theme) => ({
           borderRadius: '99em',
-          width: 10,
-          height: 10,
+          width: { xs: 6, sm: 8, md: 10 },
+          height: { xs: 6, sm: 8, md: 10 },
           background: theme.palette.text.primary,
         })}
         style={{ opacity }}

package/components/ScrollerDots.tsx

@@ -1,6 +1,6 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
 import { extendableComponent } from '@graphcommerce/next-ui/Styles'
-import { FabProps, styled, SxProps, Theme } from '@mui/material'
+import { Box, FabProps, styled, SxProps, Theme } from '@mui/material'
 import { m } from 'framer-motion'
 import React from 'react'
 import { useScrollerContext } from '../hooks/useScrollerContext'
@@ -26,17 +26,20 @@ export const ScrollerDots = m(
     if (itemsArr.length <= 1) return null
 
     return (
-      <MotionBox
+      <Box
         {...containerProps}
         className={classes.root}
         ref={ref}
         sx={[
           {
             width: 'fit-content',
-            display: 'grid',
-            gridAutoFlow: 'column',
-            padding: `0 6px`,
-            borderRadius: '99em',
+            maxWidth: '100%',
+            mx: 4,
+            py: 0,
+            px: 1,
+            borderRadius: 8,
+            background: 'transparent',
+            display: 'flex',
           },
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}
@@ -45,7 +48,7 @@ export const ScrollerDots = m(
           // eslint-disable-next-line react/no-array-index-key
           <ScrollerDot key={idx} {...item} idx={idx} />
         ))}
-      </MotionBox>
+      </Box>
     )
   }),
 )

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-scroller",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "5.2.0-canary.12",
+  "version": "5.2.0-canary.14",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -16,13 +16,13 @@
   },
   "dependencies": {
     "popmotion": "11.0.5",
-    "@graphcommerce/framer-utils": "5.2.0-canary.12",
-    "@graphcommerce/image": "5.2.0-canary.12"
+    "@graphcommerce/framer-utils": "5.2.0-canary.14",
+    "@graphcommerce/image": "5.2.0-canary.14"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "5.2.0-canary.12",
-    "@graphcommerce/prettier-config-pwa": "5.2.0-canary.12",
-    "@graphcommerce/typescript-config-pwa": "5.2.0-canary.12"
+    "@graphcommerce/eslint-config-pwa": "5.2.0-canary.14",
+    "@graphcommerce/prettier-config-pwa": "5.2.0-canary.14",
+    "@graphcommerce/typescript-config-pwa": "5.2.0-canary.14"
   },
   "peerDependencies": {
     "@mui/material": "^5.10.16",