@graphcommerce/magento-product-configurable 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/ConfigurableCartItem/OptionsList.tsx

@@ -1,4 +1,4 @@
-import { extendableComponent } from '@graphcommerce/next-ui'
+import { extendableComponent, sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import type { ConfigurableCartItemFragment } from './ConfigurableCartItem.gql'
@@ -18,15 +18,15 @@ export function OptionsList(props: CartItemOptionsListProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         {
           gridArea: 'itemOptions',
           cursor: 'default',
           marginLeft: 0,
           paddingBottom: '4px',
         },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {configurable_options &&
         configurable_options.map((option) => (

package/Swatches/ColorSwatchData.tsx

@@ -1,4 +1,4 @@
-import { extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
+import { extendableComponent, responsiveVal, sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import type { ColorSwatchDataFragment } from './ColorSwatchData.gql'
@@ -23,19 +23,17 @@ export function ColorSwatchData(props: ColorSwatchDataProps) {
       <Box
         className={classes.color}
         style={{ backgroundColor: value ?? undefined }}
-        sx={[
-          {
-            margin: '0 auto',
-            height: responsiveVal(22, 30),
-            width: responsiveVal(22, 30),
-            borderRadius: '50%',
-            '&.sizeSmall': {
-              height: responsiveVal(8, 12),
-              width: responsiveVal(8, 12),
-              marginTop: responsiveVal(2, 4),
-            },
+        sx={sxx({
+          margin: '0 auto',
+          height: responsiveVal(22, 30),
+          width: responsiveVal(22, 30),
+          borderRadius: '50%',
+          '&.sizeSmall': {
+            height: responsiveVal(8, 12),
+            width: responsiveVal(8, 12),
+            marginTop: responsiveVal(2, 4),
           },
-        ]}
+        })}
       />
       {size !== 'small' && (
         <Box component='span' className={classes.label}>

package/Swatches/ImageSwatchData.tsx

@@ -1,5 +1,5 @@
 import { Image } from '@graphcommerce/image'
-import { extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
+import { extendableComponent, responsiveVal, sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import type { ImageSwatchDataFragment } from './ImageSwatchData.gql'
@@ -20,12 +20,12 @@ export function ImageSwatchData(props: ImageSwatchDataProps) {
 
   return (
     <Box
-      sx={[
+      sx={sxx(
         (theme) => ({
           '& .image': {
             height: responsiveVal(40, 80),
             width: responsiveVal(40, 80),
-            border: `3px solid ${theme.palette.divider}`,
+            border: `3px solid ${theme.vars.palette.divider}`,
             boxSizing: 'border-box',
             borderRadius: '50%',
             objectFit: 'cover',
@@ -35,8 +35,8 @@ export function ImageSwatchData(props: ImageSwatchDataProps) {
             height: 20,
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {thumbnail ? (
         <Image

package/Swatches/TextSwatchData.tsx

@@ -1,5 +1,5 @@
 import { Money } from '@graphcommerce/magento-store'
-import { extendableComponent } from '@graphcommerce/next-ui'
+import { extendableComponent, sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import type { TextSwatchDataFragment } from './TextSwatchData.gql'
@@ -18,10 +18,7 @@ export function TextSwatchData(props: TextSwatchDataProps) {
   const classes = withState({ size })
 
   return (
-    <Box
-      className={classes.root}
-      sx={[{ width: '100%', height: '100%' }, ...(Array.isArray(sx) ? sx : [sx])]}
-    >
+    <Box className={classes.root} sx={sxx({ width: '100%', height: '100%' }, sx)}>
       {size !== 'small' ? (
         <>
           <Box

package/components/ConfigurableProductOptions/ConfigurableProductOption.tsx

@@ -2,7 +2,7 @@ import type { ActionCardItemBase } from '@graphcommerce/ecommerce-ui'
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import type { AddProductsToCartFields } from '@graphcommerce/magento-product/components'
 import { useFormAddProductsToCart } from '@graphcommerce/magento-product/components'
-import { filterNonNullableKeys, nonNullable, SectionHeader } from '@graphcommerce/next-ui'
+import { filterNonNullableKeys, nonNullable, SectionHeader, sxx } from '@graphcommerce/next-ui'
 import { useWatch } from '@graphcommerce/react-hook-form'
 import { t } from '@lingui/core/macro'
 import type { SxProps, Theme } from '@mui/material'
@@ -77,13 +77,12 @@ export function ConfigurableProductOption(props: ConfigurableProductOptionProps)
   if (!values) return null
 
   return (
-    <Box key={fieldName} sx={[...(Array.isArray(sx) ? sx : [sx])]}>
+    <Box key={fieldName} sx={sx}>
       <SectionHeader
         labelLeft={optionStartLabels?.[attribute_code ?? ''] ?? label}
         labelRight={optionEndLabels?.[attribute_code ?? '']}
         sx={{ mt: 0 }}
       />
-
       <ActionCardListForm<
         ActionCardItemBase & ConfigurableOptionValueFragment,
         AddProductsToCartFields

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product-configurable",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.66",
+  "version": "10.0.0-canary.68",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,27 +12,27 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.66",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.66",
-    "@graphcommerce/graphql": "^10.0.0-canary.66",
-    "@graphcommerce/graphql-mesh": "^10.0.0-canary.66",
-    "@graphcommerce/image": "^10.0.0-canary.66",
-    "@graphcommerce/lingui-next": "10.0.0-canary.66",
-    "@graphcommerce/magento-cart": "^10.0.0-canary.66",
-    "@graphcommerce/magento-cart-items": "^10.0.0-canary.66",
-    "@graphcommerce/magento-category": "^10.0.0-canary.66",
-    "@graphcommerce/magento-customer": "^10.0.0-canary.66",
-    "@graphcommerce/magento-product": "^10.0.0-canary.66",
-    "@graphcommerce/magento-product-simple": "^10.0.0-canary.66",
-    "@graphcommerce/magento-store": "^10.0.0-canary.66",
-    "@graphcommerce/next-ui": "^10.0.0-canary.66",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.66",
-    "@graphcommerce/react-hook-form": "^10.0.0-canary.66",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.66",
+    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.68",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/graphql": "^10.0.0-canary.68",
+    "@graphcommerce/graphql-mesh": "^10.0.0-canary.68",
+    "@graphcommerce/image": "^10.0.0-canary.68",
+    "@graphcommerce/lingui-next": "10.0.0-canary.68",
+    "@graphcommerce/magento-cart": "^10.0.0-canary.68",
+    "@graphcommerce/magento-cart-items": "^10.0.0-canary.68",
+    "@graphcommerce/magento-category": "^10.0.0-canary.68",
+    "@graphcommerce/magento-customer": "^10.0.0-canary.68",
+    "@graphcommerce/magento-product": "^10.0.0-canary.68",
+    "@graphcommerce/magento-product-simple": "^10.0.0-canary.68",
+    "@graphcommerce/magento-store": "^10.0.0-canary.68",
+    "@graphcommerce/next-ui": "^10.0.0-canary.68",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/react-hook-form": "^10.0.0-canary.68",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.68",
     "@lingui/core": "^5",
     "@lingui/macro": "^5",
     "@lingui/react": "^5",
-    "@mui/material": "^5.10.16",
+    "@mui/material": "^7.0.0",
     "framer-motion": "^11.0.0",
     "next": "*",
     "react": "^19.2.0",

package/plugins/ConfigurableProductPage/ConfigurableProductPageDescription.tsx

@@ -20,7 +20,7 @@ export function ProductPageDescription(
   if (product.__typename !== 'ConfigurableProduct') {
     return <Prev product={product} index={index} {...rest} />
   }
-  
+
   return (
     <Prev
       product={{

package/plugins/ConfigurableProductPage/ConfigurableProductPageJsonLd.tsx

@@ -4,8 +4,8 @@ import type {
   ProductPageJsonLdProps,
 } from '@graphcommerce/magento-product'
 import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
-import { useConfigurableSelectedVariant } from '../../hooks'
 import { isTypename } from '@graphcommerce/next-ui'
+import { useConfigurableSelectedVariant } from '../../hooks'
 
 export const config: PluginConfig = {
   type: 'component',

package/plugins/ConfigurableProductPage/ConfigurableProductPageMeta.tsx

@@ -21,7 +21,6 @@ export function ProductPageMeta(props: PluginProps<ProductPageMetaProps> & AddTo
   const isValidVariant = (variant?.url_rewrites ?? []).length > 0 && variant?.url_key
   const targetUrl = isValidVariant ? productLink(variant) : productLink(product)
 
-
   useEffect(() => {
     if (product.__typename !== 'ConfigurableProduct') return
     // Filter asPath with #, for zoomed gallery