@graphcommerce/magento-cart 10.0.0-canary.67 → 10.0.0-canary.68

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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
 
 ### Patch Changes

package/components/CartAgreementsForm/CartAgreementsForm.tsx

@@ -1,6 +1,6 @@
 import { CheckboxElement } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
-import { extendableComponent, FormDiv } from '@graphcommerce/next-ui'
+import { extendableComponent, FormDiv, sxx } from '@graphcommerce/next-ui'
 import type { UseFormComposeOptions } from '@graphcommerce/react-hook-form'
 import { FormPersist, useForm, useFormCompose } from '@graphcommerce/react-hook-form'
 import { t } from '@lingui/core/macro'
@@ -50,10 +50,7 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
   if (data?.checkoutAgreements?.length === 0) return null
 
   return (
-    <FormDiv
-      className={classes.form}
-      sx={[(theme) => ({ pt: theme.spacings.md }), ...(Array.isArray(sx) ? sx : [sx])]}
-    >
+    <FormDiv className={classes.form} sx={sxx((theme) => ({ pt: theme.spacings.md }), sx)}>
       <form noValidate onSubmit={submit} name='cartAgreements'>
         <Box className={classes.formInner} sx={{ typography: 'body1', display: 'inline-block' }}>
           {data?.checkoutAgreements &&
@@ -64,7 +61,6 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
               // check if the agreement text contains an anchor tag
               const containsLink = containsAnchorTag(agreement.checkbox_text)
               let labelContent: React.ReactNode
-
               if (containsLink) {
                 labelContent = (
                   <Typography

package/components/CartFab/CartFab.tsx

@@ -3,12 +3,13 @@ import {
   extendableComponent,
   iconShoppingBag,
   IconSvg,
+  sxx,
   useFabSize,
   useScrollY,
 } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
 import type { BadgeProps, FabProps, SxProps, Theme } from '@mui/material'
-import { alpha, Box, Fab, styled, useTheme } from '@mui/material'
+import { Box, Fab, styled, useTheme } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import React from 'react'
 import { useCartEnabled, useCartShouldLoginToContinue } from '../../hooks'
@@ -42,8 +43,8 @@ function CartFabContent(props: CartFabContentProps) {
   const scrollY = useScrollY()
   const opacity = useTransform(scrollY, [50, 60], [0, 1])
 
-  const paper0 = alpha(theme2.palette.background.paper, 0)
-  const paper1 = alpha(theme2.palette.background.paper, 1)
+  const paper0 = theme2.alpha(theme2.palette.background.paper, 0)
+  const paper1 = theme2.alpha(theme2.palette.background.paper, 1)
   const backgroundColor = useTransform(scrollY, [0, 10], [paper0, paper1])
 
   const cartIcon = icon ?? <IconSvg src={iconShoppingBag} size='large' />
@@ -52,10 +53,7 @@ function CartFabContent(props: CartFabContentProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
-        { position: 'relative', width: fabIconSize, height: fabIconSize },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+      sx={sxx({ position: 'relative', width: fabIconSize, height: fabIconSize }, sx)}
     >
       <MotionFab
         href='/cart'
@@ -66,7 +64,7 @@ function CartFabContent(props: CartFabContentProps) {
         style={{ backgroundColor }}
         sx={(theme) => ({
           [theme.breakpoints.down('md')]: {
-            backgroundColor: `${theme.palette.background.paper} !important`,
+            backgroundColor: `${theme.vars.palette.background.paper} !important`,
           },
         })}
         {...fabProps}

package/components/CartItemSummary/CartItemSummary.tsx

@@ -7,6 +7,7 @@ import {
   extendableComponent,
   nonNullable,
   SectionContainer,
+  sxx,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
@@ -38,10 +39,10 @@ export function CartItemSummary(props: OrderSummaryProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           padding: `${theme.spacings.sm} ${theme.spacings.sm}`,
-          border: `1px ${theme.palette.divider} solid`,
+          border: `1px ${theme.vars.palette.divider} solid`,
           ...breakpointVal(
             'borderRadius',
             theme.shape.borderRadius * 2,
@@ -49,8 +50,8 @@ export function CartItemSummary(props: OrderSummaryProps) {
             theme.breakpoints.values,
           ),
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <SectionContainer
         sx={{ '& .SectionHeader-root': { mt: 0 } }}

package/components/CartStartCheckout/CartStartCheckout.tsx

@@ -1,6 +1,6 @@
 import { Money } from '@graphcommerce/magento-store'
 import type { ButtonProps } from '@graphcommerce/next-ui'
-import { Button, extendableComponent, iconChevronRight, IconSvg } from '@graphcommerce/next-ui'
+import { Button, extendableComponent, iconChevronRight, IconSvg, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link } from '@mui/material'
@@ -49,13 +49,13 @@ export function CartStartCheckout(props: CartStartCheckoutProps) {
   return (
     <Box
       className={classes.checkoutButtonContainer}
-      sx={[
+      sx={sxx(
         (theme) => ({
           textAlign: 'center',
           my: theme.spacings.md,
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {shouldLoginToContinue && (
         <Box sx={{ mb: 1 }} className={classes.loginContainer}>

package/components/CartSummary/CartSummary.tsx

@@ -1,9 +1,9 @@
 import { useHistoryLink } from '@graphcommerce/framer-next-pages'
 import { useBillingAddressPermission } from '@graphcommerce/magento-customer'
-import { breakpointVal, extendableComponent, SectionContainer } from '@graphcommerce/next-ui'
+import { breakpointVal, extendableComponent, SectionContainer, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, lighten, Link, Typography } from '@mui/material'
+import { Box, Link, Typography } from '@mui/material'
 import React from 'react'
 import { useCartQuery } from '../../hooks'
 import { CartAddressMultiLine } from '../CartAddressMultiLine/CartAddressMultiLine'
@@ -37,7 +37,7 @@ export function CartSummary(props: CartSummaryProps) {
   return (
     <Box
       className={classes.root}
-      sx={[
+      sx={sxx(
         (theme) => ({
           margin: `${theme.spacings.sm} 0`,
           '& > div:last-of-type': {
@@ -56,8 +56,8 @@ export function CartSummary(props: CartSummaryProps) {
             ),
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Box
         className={classes.detailsContainer}
@@ -74,10 +74,7 @@ export function CartSummary(props: CartSummaryProps) {
             theme.shape.borderRadius * 3,
             theme.breakpoints.values,
           ),
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.lighten(theme.vars.palette.background.default, 0.15),
           padding: theme.spacings.sm,
           gridColumnGap: theme.spacings.xxl,
           gridRowGap: theme.spacings.sm,
@@ -86,6 +83,9 @@ export function CartSummary(props: CartSummaryProps) {
             gridTemplateColumns: '1fr 1fr',
             marginTop: theme.spacings.xxs,
           },
+          ...theme.applyStyles('light', {
+            background: theme.vars.palette.background.default,
+          }),
         })}
       >
         <Box>

package/components/CartTotals/CartTotals.tsx

@@ -3,7 +3,7 @@ import { magentoVersion } from '@graphcommerce/next-config/config'
 import { breakpointVal, extendableComponent, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { Box, Divider, lighten } from '@mui/material'
+import { Box, Divider } from '@mui/material'
 import { useCartQuery, useDisplayInclTax } from '../../hooks'
 import { GetCartTotalsDocument } from './GetCartTotals.gql'
 
@@ -71,12 +71,11 @@ export function CartTotals(props: CartTotalsProps) {
             theme.shape.borderRadius * 5,
             theme.breakpoints.values,
           ),
-          background:
-            theme.palette.mode === 'light'
-              ? theme.palette.background.default
-              : lighten(theme.palette.background.default, 0.15),
+          background: theme.vars.palette.background.default,
+          ...theme.applyStyles('dark', {
+            background: theme.lighten(theme.vars.palette.background.default, 0.15),
+          }),
           padding: `${theme.spacings.xs} ${theme.spacings.sm}`,
-
           '&.containerMargin': {
             marginTop: theme.spacings.md,
             px: theme.spacings.xs,
@@ -132,7 +131,9 @@ export function CartTotals(props: CartTotalsProps) {
           sx={{ display: 'flex', justifyContent: 'space-between' }}
         >
           <Box>
-            <Trans>Shipping ({shippingMethod.carrier_title} {shippingMethod.method_title})</Trans>
+            <Trans>
+              Shipping ({shippingMethod.carrier_title} {shippingMethod.method_title})
+            </Trans>
           </Box>
           <Box className={classes.money} sx={{ whiteSpace: 'nowrap' }}>
             <Money
@@ -171,7 +172,7 @@ export function CartTotals(props: CartTotalsProps) {
           sx={(theme) => ({
             display: 'flex',
             justifyContent: 'space-between',
-            color: theme.palette.primary.main,
+            color: theme.vars.palette.primary.main,
           })}
         >
           <Box>

package/components/EditBillingAddressForm/EditBillingAddressForm.tsx

@@ -74,7 +74,6 @@ export function EditBillingAddressForm(props: EditBillingAddressFormProps) {
         <CompanyFields<SetBillingAddressMutationVariables> form={form} />
         <NameFields form={form} prefix />
         <AddressFields<SetBillingAddressMutationVariables> form={form} />
-
         <FormRow>
           <TelephoneElement
             variant='outlined'
@@ -85,9 +84,7 @@ export function EditBillingAddressForm(props: EditBillingAddressFormProps) {
             showValid
           />
         </FormRow>
-
         <FormDivider />
-
         <FormActions sx={{ paddingBottom: 0 }}>
           <Button
             type='submit'
@@ -100,7 +97,6 @@ export function EditBillingAddressForm(props: EditBillingAddressFormProps) {
           </Button>
         </FormActions>
       </Form>
-
       <ApolloCustomerErrorAlert error={error} />
     </>
   )

package/components/EmptyCart/EmptyCart.tsx

@@ -30,11 +30,7 @@ export function EmptyCart(props: EmptyCartProps) {
       }
       {...rest}
     >
-      {children ?? (
-        <Trans>
-          Discover our collection and add items to your cart!
-        </Trans>
-      )}
+      {children ?? <Trans>Discover our collection and add items to your cart!</Trans>}
     </FullPageMessage>
   )
 }

package/components/InlineAccount/InlineAccount.tsx

@@ -5,7 +5,7 @@ import {
   useCustomerSession,
   useGuestQuery,
 } from '@graphcommerce/magento-customer'
-import { Button, extendableComponent, FormRow } from '@graphcommerce/next-ui'
+import { Button, extendableComponent, FormRow, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, TextField, Typography } from '@mui/material'
@@ -48,15 +48,15 @@ export function InlineAccount(props: InlineAccountProps) {
     <div>
       <Box
         className={classes.root}
-        sx={[
+        sx={sxx(
           (theme) => ({
             borderRadius: '4px',
-            border: `1px solid ${theme.palette.divider}`,
+            border: `1px solid ${theme.vars.palette.divider}`,
             padding: theme.spacings.md,
             marginTop: theme.spacings.sm,
           }),
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
       >
         <Box
           className={classes.innerContainer}
@@ -101,8 +101,10 @@ export function InlineAccount(props: InlineAccountProps) {
                 variant='outlined'
                 label={<Trans>Email address</Trans>}
                 value={cart?.email}
-                InputProps={{
-                  readOnly: true,
+                slotProps={{
+                  input: {
+                    readOnly: true,
+                  },
                 }}
               />
             </FormRow>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.67",
+  "version": "10.0.0-canary.68",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -20,24 +20,24 @@
     "./plugins/useSignInFormMergeCart": "./plugins/useSignInFormMergeCart.ts"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.67",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/framer-next-pages": "^10.0.0-canary.67",
-    "@graphcommerce/framer-scroller": "^10.0.0-canary.67",
-    "@graphcommerce/framer-utils": "^10.0.0-canary.67",
-    "@graphcommerce/graphql": "^10.0.0-canary.67",
-    "@graphcommerce/image": "^10.0.0-canary.67",
-    "@graphcommerce/magento-customer": "^10.0.0-canary.67",
-    "@graphcommerce/magento-graphql": "^10.0.0-canary.67",
-    "@graphcommerce/magento-store": "^10.0.0-canary.67",
-    "@graphcommerce/next-ui": "^10.0.0-canary.67",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/react-hook-form": "^10.0.0-canary.67",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.67",
+    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.68",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/framer-next-pages": "^10.0.0-canary.68",
+    "@graphcommerce/framer-scroller": "^10.0.0-canary.68",
+    "@graphcommerce/framer-utils": "^10.0.0-canary.68",
+    "@graphcommerce/graphql": "^10.0.0-canary.68",
+    "@graphcommerce/image": "^10.0.0-canary.68",
+    "@graphcommerce/magento-customer": "^10.0.0-canary.68",
+    "@graphcommerce/magento-graphql": "^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",
     "graphql": "^16.0.0",
     "next": "*",