@graphcommerce/framer-scroller 10.0.0-canary.66 → 10.0.0-canary.68

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 10.0.0-canary.68
+
+### Major Changes
+
+- [#2557](https://github.com/graphcommerce-org/graphcommerce/pull/2557) [`ceaadd8`](https://github.com/graphcommerce-org/graphcommerce/commit/ceaadd87f0648982a068a3b07b1fa149c9127f49) - ## Material UI v5 → v7 Migration
+
+  This release upgrades Material UI from v5 to v7 with full CSS variables support. ([@paales](https://github.com/paales))
+
+## 10.0.0-canary.67
+
 ## 10.0.0-canary.66
 
 ## 10.0.0-canary.65

package/README.md

@@ -29,9 +29,9 @@ In short: A React API for
 ```tsx
 import {
   Scroller,
-  ScrollerProvider,
-  ScrollerDots,
   ScrollerButton,
+  ScrollerDots,
+  ScrollerProvider,
 } from '@graphcommerce/framer-scroller'
 
 function MyScroller() {

package/components/MotionImageAspect.tsx

@@ -1,5 +1,6 @@
 import type { ImageProps } from '@graphcommerce/image'
 import { Image } from '@graphcommerce/image'
+import { sxx } from '@graphcommerce/next-ui'
 import { Box, type BoxProps } from '@mui/material'
 import { m, type MotionProps } from 'framer-motion'
 import { forwardRef } from 'react'
@@ -31,10 +32,9 @@ export const MotionImageAspect = m.create(
     return (
       <Box
         className='MotionImageAspect'
-        sx={[
+        sx={sxx(
           {
             position: 'relative',
-
             '& > picture': {
               display: 'block',
               '@supports (aspect-ratio: 1 / 1)': {
@@ -42,12 +42,10 @@ export const MotionImageAspect = m.create(
                 maxHeight: '100%',
                 width: 'auto',
                 height: 'auto',
-
                 position: 'absolute',
                 top: '50%',
                 left: '50%',
                 transform: 'translate(-50%, -50%)',
-
                 '&:after': {
                   display: 'block',
                   content: '""',
@@ -66,8 +64,8 @@ export const MotionImageAspect = m.create(
               },
             },
           },
-          ...(Array.isArray(slotProps?.box?.sx) ? slotProps.box.sx : [slotProps?.box?.sx]),
-        ]}
+          slotProps?.box?.sx,
+        )}
         {...slotProps?.box}
       >
         <Image

package/components/Scroller.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { styled } from '@mui/material'
 import { m } from 'framer-motion'
@@ -15,7 +16,7 @@ export const Scroller = forwardRef<HTMLDivElement, ScrollableProps & { sx?: SxPr
       forwardedRef,
     )
 
-    return <ScrollerDiv {...scroller} sx={[scroller.sx, ...(Array.isArray(sx) ? sx : [sx])]} />
+    return <ScrollerDiv {...scroller} sx={sxx(scroller.sx, sx)} />
   },
 )
 Scroller.displayName = 'Scroller'

package/components/ScrollerBar.tsx

@@ -72,15 +72,15 @@ export function ScrollerBar(props: ScrollerBarProps) {
       className={classes.track}
       sx={sx}
       whileHover={{
-        backgroundColor: theme.palette.action.selected,
-        // borderTop: `1px solid ${theme.palette.action.active}`,
+        backgroundColor: theme.vars.palette.action.selected,
+        // borderTop: `1px solid ${theme.vars.palette.action.active}`,
       }}
     >
       <Scroll
         className={classes.thumb}
         aria-label='Scroll'
         sx={{
-          backgroundColor: theme.palette.action.active,
+          backgroundColor: theme.vars.palette.action.active,
           borderRadius: '50px',
         }}
         style={{ [direction]: thumbX, [size]: thumbSize }}

package/components/ScrollerButton.tsx

@@ -1,4 +1,5 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { sxx } from '@graphcommerce/next-ui'
 import type { FabProps, SxProps, Theme } from '@mui/material'
 import { Fab, styled } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
@@ -79,11 +80,10 @@ export const ScrollerButton = m.create(
           {...buttonProps}
           onClick={handleClick}
           aria-label={direction}
-          sx={[{ transition: 'all 250ms', ...mode }, ...(Array.isArray(sx) ? sx : [sx])]}
+          sx={sxx({ transition: 'all 250ms', ...mode }, sx)}
         />
       </MotionDiv>
     )
   }),
 )
-
 ScrollerButton.displayName = 'ScrollerButton'

package/components/ScrollerDot.tsx

@@ -54,7 +54,7 @@ export function ScrollerDot(props: ScrollerDotProps) {
           borderRadius: '99em',
           width: { xs: 6, sm: 8, md: 10 },
           height: { xs: 6, sm: 8, md: 10 },
-          background: theme.palette.text.primary,
+          background: theme.vars.palette.text.primary,
         })}
         style={{ opacity }}
       />

package/components/ScrollerDots.tsx

@@ -1,4 +1,5 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { sxx } from '@graphcommerce/next-ui'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { extendableComponent } from '@graphcommerce/next-ui/Styles'
 import type { FabProps, SxProps, Theme } from '@mui/material'
@@ -30,7 +31,7 @@ export const ScrollerDots = m.create(
         {...containerProps}
         className={classes.root}
         ref={ref}
-        sx={[
+        sx={sxx(
           {
             width: 'fit-content',
             maxWidth: '100%',
@@ -41,8 +42,8 @@ export const ScrollerDots = m.create(
             background: 'transparent',
             display: 'flex',
           },
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
       >
         {itemsArr.map((item, idx) => (
           // eslint-disable-next-line react/no-array-index-key

package/components/ScrollerPageCounter.tsx

@@ -1,4 +1,5 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { styled } from '@mui/material'
 import { m } from 'framer-motion'
@@ -29,7 +30,7 @@ export const ScrollerPageCounter = React.forwardRef<HTMLDivElement, SliderPageCo
     })
 
     return (
-      <MotionDiv ref={ref} sx={[{ typography: 'h4' }, ...(Array.isArray(sx) ? sx : [sx])]}>
+      <MotionDiv ref={ref} sx={sxx({ typography: 'h4' }, sx)}>
         <span>{String(current).padStart(2, '0')}</span> — {String(count).padStart(2, '0')}
       </MotionDiv>
     )

package/components/ScrollerThumbnail.tsx

@@ -3,7 +3,7 @@ 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'
+import { styled, useTheme } from '@mui/material'
 import { m, motionValue, useTransform } from 'framer-motion'
 import { useEffect, useRef } from 'react'
 import { useScrollerContext } from '../hooks/useScrollerContext'
@@ -41,9 +41,9 @@ export function ScrollerThumbnail(props: ScrollerThumbnailProps) {
     item.visibility,
     [1, 0],
     [
-      `inset 0 0 0 2px ${theme.palette.primary.main}, 0 0 0 4px ${alpha(
-        theme.palette.primary.main,
-        theme.palette.action.hoverOpacity,
+      `inset 0 0 0 2px ${theme.vars.palette.primary.main}, 0 0 0 4px ${theme.alpha(
+        theme.vars.palette.primary.main,
+        theme.vars.palette.action.hoverOpacity,
       )}`,
       'inset 0 0 0 2px #ffffff00, 0 0 0 4px #ffffff00',
     ],
@@ -85,11 +85,11 @@ export function ScrollerThumbnail(props: ScrollerThumbnailProps) {
       layout='position'
       style={{ boxShadow }}
       layoutDependency={layoutDependency}
-      sx={{
+      sx={(theme) => ({
         padding: '2px',
         mx: `calc(${theme.spacing(1)} / 2)`,
         borderRadius: theme.shape.borderRadius,
-      }}
+      })}
     >
       <Image
         {...image}

package/components/ThumbnailContainer.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { styled } from '@mui/material'
 import type { PanHandlers } from 'framer-motion'
@@ -24,7 +25,7 @@ export function ThumbnailContainer(props: ThumbnailContainerProps) {
       ref={containerRef}
       onPan={onPan}
       layoutDependency={layoutDependency}
-      sx={[
+      sx={sxx(
         {
           padding: '4px',
           userSelect: 'none',
@@ -33,12 +34,10 @@ export function ThumbnailContainer(props: ThumbnailContainerProps) {
           overflowX: 'auto',
           display: 'flex',
           scrollbarWidth: 'none',
-          '&::-webkit-scrollbar': {
-            display: 'none',
-          },
+          '&::-webkit-scrollbar': { display: 'none' },
         },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {children}
     </MotionBox>

package/hooks/usePreventScroll.ts

@@ -7,7 +7,7 @@ function usePreventScroll(shouldPrevent: boolean) {
 
   useEffect(() => {
     if (shouldPrevent) {
-      const scrollbarSize = getScrollbarSize(document)
+      const scrollbarSize = getScrollbarSize(window)
 
       document.body.style.overflow = 'hidden'
       document.body.style.paddingRight = `${scrollbarSize}px`

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-scroller",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.66",
+  "version": "10.0.0-canary.68",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -21,14 +21,14 @@
     "popmotion": "11.0.5"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.66",
-    "@graphcommerce/framer-utils": "^10.0.0-canary.66",
-    "@graphcommerce/image": "^10.0.0-canary.66",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.66",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.66",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/framer-utils": "^10.0.0-canary.68",
+    "@graphcommerce/image": "^10.0.0-canary.68",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.68",
     "@lingui/core": "^5",
     "@lingui/react": "^5",
-    "@mui/material": "^5.10.16",
+    "@mui/material": "^7.0.0",
     "framer-motion": "^11.0.0",
     "next": "*",
     "react": "^19.2.0",