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

package/ApplyCouponForm/ApplyCouponForm.tsx

@@ -1,6 +1,6 @@
 import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { ApolloCartErrorAlert, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
-import { Button, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
+import { Button, extendableComponent, responsiveVal, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import type { SxProps, Theme } from '@mui/material'
@@ -25,15 +25,15 @@ export function ApplyCouponForm(props: ApplyCouponFormProps) {
       onSubmit={submitHandler}
       noValidate
       className={classes.couponForm}
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'grid',
           alignItems: 'center',
           gridTemplateColumns: `1fr minmax(min-content, ${responsiveVal(70, 140)})`,
           gridColumnGap: theme.spacings.sm,
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <TextFieldElement
         variant='outlined'

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
 
 ## 10.0.0-canary.66

package/CouponAccordion/CouponAccordion.tsx

@@ -4,6 +4,7 @@ import {
   extendableComponent,
   iconChevronDown,
   IconSvg,
+  sxx,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { AccordionProps, SxProps, Theme } from '@mui/material'
@@ -41,7 +42,7 @@ export function CouponAccordion(props: CouponAccordionProps) {
       onChange={handleChange}
       expanded={!coupon && open}
       variant='outlined'
-      sx={[
+      sx={sxx(
         (theme) => ({
           ...breakpointVal(
             'borderRadius',
@@ -51,15 +52,16 @@ export function CouponAccordion(props: CouponAccordionProps) {
           ),
           '::before': { display: 'none' },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
       {...rest}
     >
       <AccordionSummary
         onClick={(e) => e.preventDefault()}
         expandIcon={<IconSvg src={iconChevronDown} style={{ opacity: coupon ? 0 : 1 }} />}
-        sx={[
+        sx={sxx(
           (theme) => ({
+            typography: 'body1',
             px: theme.spacings.xs,
             '& .MuiAccordionSummary-content': {
               alignItems: 'center',
@@ -68,19 +70,15 @@ export function CouponAccordion(props: CouponAccordionProps) {
               justifyContent: 'space-between',
             },
           }),
-          Boolean(coupon) && {
-            '&:hover:not(.Mui-disabled)': {
-              cursor: 'default',
-            },
-          },
-        ]}
+          coupon && { '&:hover:not(.Mui-disabled)': { cursor: 'default' } },
+        )}
       >
         <Box sx={{ flex: 1 }}>
           <Trans>Discount code</Trans>
         </Box>
         <RemoveCouponForm {...data.cart} sx={{ flex: 0 }} />
       </AccordionSummary>
-      <AccordionDetails sx={(theme) => ({ px: theme.spacings.xs })}>
+      <AccordionDetails sx={(theme) => ({ px: theme.spacings.xs, typography: 'body1' })}>
         <ApplyCouponForm />
       </AccordionDetails>
     </Accordion>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart-coupon",
   "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": {
@@ -15,20 +15,20 @@
     ".": "./index.ts"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^10.0.0-canary.67",
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/graphql": "^10.0.0-canary.67",
-    "@graphcommerce/image": "^10.0.0-canary.67",
-    "@graphcommerce/magento-cart": "^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/graphql": "^10.0.0-canary.68",
+    "@graphcommerce/image": "^10.0.0-canary.68",
+    "@graphcommerce/magento-cart": "^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",