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

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @graphcommerce/magento-compare
 
+## 10.0.0-canary.68
+
 ## 10.0.0-canary.67
 
 ## 10.0.0-canary.66

package/components/CompareFab.tsx

@@ -2,6 +2,7 @@ import {
   extendableComponent,
   iconCompare,
   IconSvg,
+  sxx,
   useFabSize,
   useScrollY,
 } from '@graphcommerce/next-ui'
@@ -42,10 +43,7 @@ function CompareFabContent(props: CompareFabContentProps) {
   if (total_quantity === 0) return null
 
   return (
-    <Box
-      className={classes.root}
-      sx={[{ position: 'relative', height: fabIconSize }, ...(Array.isArray(sx) ? sx : [sx])]}
-    >
+    <Box className={classes.root} sx={sxx({ position: 'relative', height: fabIconSize }, sx)}>
       <Badge
         color='primary'
         variant='standard'
@@ -60,7 +58,7 @@ function CompareFabContent(props: CompareFabContentProps) {
           color='inherit'
           sx={(theme) => ({
             width: 'unset',
-            backgroundColor: `${theme.palette.background.paper} !important`,
+            backgroundColor: `${theme.vars.palette.background.paper} !important`,
             [theme.breakpoints.down('md')]: {},
           })}
           {...rest}

package/components/CompareListAttributes.tsx

@@ -1,4 +1,4 @@
-import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { filterNonNullableKeys, sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import { useCompareList } from '../hooks/useCompareList'
@@ -18,9 +18,9 @@ export function CompareListAttributes(props: CompareListAttributesProps) {
 
   return (
     <Box
-      sx={[
+      sx={sxx(
         (theme) => ({
-          bgcolor: theme.palette.background.default,
+          bgcolor: theme.vars.palette.background.default,
           '& :first-of-type > div': {
             mt: 0,
           },
@@ -33,8 +33,8 @@ export function CompareListAttributes(props: CompareListAttributesProps) {
             p: theme.spacings.lg,
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {compareListAttributes.map((attribute) => (
         <CompareListRow compareAbleItems={items} attribute={attribute} key={attribute?.code} />

package/components/CompareListIntroText.tsx

@@ -11,7 +11,7 @@ export function CompareListIntroText({ children }: CompareListIntroTextProps) {
         position: 'relative',
         textAlign: 'center',
         paddingBottom: 2,
-        background: theme.palette.background.paper,
+        background: theme.vars.palette.background.paper,
         zIndex: 11,
       })}
     >

package/components/CompareListItems.tsx

@@ -1,5 +1,6 @@
 import type { ProductItemsGridProps } from '@graphcommerce/magento-product'
 import { AddProductsToCartForm, ProductListItemsBase } from '@graphcommerce/magento-product'
+import { sxx } from '@graphcommerce/next-ui'
 import { useCompareListStyles } from '../hooks/useCompareListStyles'
 import { useCompareVisibleItems } from './CompareListForm'
 
@@ -18,7 +19,7 @@ export function CompareListItems(props: CompareListItemsProps) {
         title='Compare items'
         items={items}
         renderers={renderers}
-        sx={[compareListStyles, ...(Array.isArray(sx) ? sx : [sx])]}
+        sx={sxx(compareListStyles, sx)}
       />
     </AddProductsToCartForm>
   )

package/components/CompareListRow.tsx

@@ -1,4 +1,4 @@
-import { SectionContainer } from '@graphcommerce/next-ui'
+import { SectionContainer, sxx } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
 import type { ComparableItemFragment } from '../graphql'
 import { useCompareListStyles } from '../hooks/useCompareListStyles'
@@ -21,25 +21,43 @@ export function CompareListRow(props: CompareRowProps) {
     <Box>
       <SectionContainer
         labelLeft={attribute?.label}
-        sx={(theme) => ({
-          '& .SectionHeader-root': {
-            justifyContent: 'center',
-            borderBottom: 'none',
-            pb: 0,
-            '& > .MuiTypography-root': {
-              pb: theme.spacings.xxs,
-              borderBottom: `1px solid ${theme.palette.divider}`,
-              width: `calc(calc(calc(100% / 3) * ${columnCount}) + ${
-                columnCount > 1 ? theme.spacings.md : '0px'
-              })`,
-              [theme.breakpoints.down('md')]: {
-                width: '100%',
+        sx={sxx(
+          (theme) => ({
+            '& .SectionHeader-root': {
+              justifyContent: 'center',
+              borderBottom: 'none',
+              pb: 0,
+              '& > .MuiTypography-root': {
+                pb: theme.spacings.xxs,
+                borderBottom: `1px solid ${theme.vars.palette.divider}`,
+                [theme.breakpoints.down('md')]: {
+                  width: '100%',
+                },
               },
             },
-          },
-        })}
+          }),
+          columnCount > 1
+            ? (theme) => ({
+                '& .SectionHeader-root': {
+                  '& > .MuiTypography-root': {
+                    width: {
+                      width: theme.spacings.md,
+                    },
+                  },
+                },
+              })
+            : {
+                '& .SectionHeader-root': {
+                  '& > .MuiTypography-root': {
+                    width: {
+                      width: '0px',
+                    },
+                  },
+                },
+              },
+        )}
       >
-        <Box sx={[compareListStyles, (theme) => ({ mb: theme.spacings.lg })]}>
+        <Box sx={sxx(compareListStyles, (theme) => ({ mb: theme.spacings.lg }))}>
           {compareAbleItems?.map((item, idx) => (
             <Box
               // eslint-disable-next-line react/no-array-index-key

package/components/CompareListRowMoreInformation.tsx

@@ -1,5 +1,5 @@
 import { productLink } from '@graphcommerce/magento-product'
-import { Button, iconChevronRight, IconSvg, SectionContainer } from '@graphcommerce/next-ui'
+import { Button, iconChevronRight, IconSvg, SectionContainer, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import { Box } from '@mui/material'
 import { useCompareListStyles } from '../hooks/useCompareListStyles'
@@ -17,23 +17,41 @@ export function CompareListRowMoreInformation(props: CompareListRowMoreInformati
     <Box>
       <SectionContainer
         labelLeft={<Trans>More information</Trans>}
-        sx={(theme) => ({
-          '& .SectionHeader-root': {
-            justifyContent: 'center',
-            borderBottom: 'none',
-            pb: 0,
-            '& > .MuiTypography-root': {
-              pb: theme.spacings.xxs,
-              borderBottom: `1px solid ${theme.palette.divider}`,
-              width: `calc(calc(calc(100% / 3) * ${columnCount}) + ${
-                columnCount > 1 ? theme.spacings.md : '0px'
-              })`,
-              [theme.breakpoints.down('md')]: {
-                width: '100%',
+        sx={sxx(
+          (theme) => ({
+            '& .SectionHeader-root': {
+              justifyContent: 'center',
+              borderBottom: 'none',
+              pb: 0,
+              '& > .MuiTypography-root': {
+                pb: theme.spacings.xxs,
+                borderBottom: `1px solid ${theme.vars.palette.divider}`,
+                [theme.breakpoints.down('md')]: {
+                  width: '100%',
+                },
               },
             },
-          },
-        })}
+          }),
+          columnCount > 1
+            ? (theme) => ({
+                '& .SectionHeader-root': {
+                  '& > .MuiTypography-root': {
+                    width: {
+                      width: theme.spacings.md,
+                    },
+                  },
+                },
+              })
+            : {
+                '& .SectionHeader-root': {
+                  '& > .MuiTypography-root': {
+                    width: {
+                      width: '0px',
+                    },
+                  },
+                },
+              },
+        )}
       >
         <Box sx={compareListStyles}>
           {compareAbleItems?.map((item) => {

package/components/CompareListSelect.tsx

@@ -1,6 +1,6 @@
 import { SelectElement } from '@graphcommerce/ecommerce-ui'
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { useScrollY } from '@graphcommerce/next-ui'
+import { sxx, useScrollY } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Container, FormControl, useTheme } from '@mui/material'
 import { useCompareList, useCompareListStyles } from '../hooks'
@@ -34,11 +34,11 @@ export function CompareListSelect(props: CompareListSelectProps) {
 
   return (
     <Box
-      sx={[
+      sx={sxx(
         (theme) => ({
           pt: 1,
           pb: theme.spacings.xxs,
-          background: theme.palette.background[bgColor],
+          background: theme.vars.palette.background[bgColor],
           position: 'sticky',
           zIndex: 10,
           top: {
@@ -50,8 +50,8 @@ export function CompareListSelect(props: CompareListSelectProps) {
             md: scrolled.md ? theme.shadows[1] : 'none',
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Container sx={{ ...compareListStyles }}>
         {[...Array(gridColumns).keys()].map((compareSelectIndex) => (

package/components/CompareProductButton.tsx

@@ -1,4 +1,5 @@
 import { useMutation } from '@graphcommerce/graphql'
+import { 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'
@@ -34,7 +35,7 @@ export function CompareProductButton(props: CompareProductButtonProps) {
   }
 
   return (
-    <Box sx={[...(Array.isArray(sx) ? sx : [sx])]}>
+    <Box sx={sx}>
       <Badge badgeContent={compareList.data?.compareList?.item_count} color='primary'>
         <Button
           variant='contained'
@@ -45,7 +46,6 @@ export function CompareProductButton(props: CompareProductButtonProps) {
           {inCompareList ? <Trans>In comparelist</Trans> : <Trans>Compare</Trans>}
         </Button>
       </Badge>
-
       {displayMessageBar && (
         <CompareMessageSnackbar
           displayMessageBar={displayMessageBar}

package/components/CompareProductToggle.tsx

@@ -1,11 +1,11 @@
 import { useMutation } from '@graphcommerce/graphql'
 import { compareVariant } from '@graphcommerce/next-config/config'
 import type { FabProps } from '@graphcommerce/next-ui'
-import { Button, Fab, iconCompare } from '@graphcommerce/next-ui'
+import { Button, Fab, iconCompare, sxx } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
-import { alpha, Checkbox, useTheme } from '@mui/material'
+import { Checkbox, useTheme } from '@mui/material'
 import { useState } from 'react'
 import type { CompareProductIdInternalFragment } from '../graphql'
 import { AddProductsToCompareListDocument } from '../graphql/AddProductsToCompareList.gql'
@@ -104,33 +104,34 @@ function CompareProductToggleBase(
           onTouchStart={preventAnimationBubble}
           size='responsive'
           color='inherit'
-          sx={[
+          sx={sxx(
             (theme) => ({
-              backgroundColor:
-                theme.palette.mode === 'light' ? theme.palette.background.paper : 'transparent',
+              backgroundColor: 'transparent',
               flex: '0 0 auto',
               '& svg': {
                 stroke: strokeColorPlp,
               },
               '&:hover': {
-                backgroundColor: alpha(
-                  theme.palette.text.primary,
-                  theme.palette.action.hoverOpacity,
+                backgroundColor: theme.alpha(
+                  theme.vars.palette.text.primary,
+                  theme.vars.palette.action.hoverOpacity,
                 ),
               },
               '.SidebarGallery-root & svg': {
                 stroke: strokeColorPdp,
               },
+              ...theme.applyStyles('light', {
+                backgroundColor: theme.vars.palette.background.paper,
+              }),
             }),
-            ...(Array.isArray(sx) ? sx : [sx]),
-          ]}
+            sx,
+          )}
           title={label}
           aria-label={label}
           icon={iconCompare}
           loading={loading}
         />
       )}
-
       {displayMessageBar && (
         <CompareMessageSnackbar
           displayMessageBar={displayMessageBar}

package/components/EmptyCompareList.tsx

@@ -12,9 +12,7 @@ export function EmptyCompareList() {
         </OverlayCloseButton>
       }
     >
-      <Trans>
-        Discover our collection and add items to your comparelist!
-      </Trans>
+      <Trans>Discover our collection and add items to your comparelist!</Trans>
     </FullPageMessage>
   )
 }

package/components/EmptyCompareListButton.tsx

@@ -1,7 +1,7 @@
 import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
 import { useMutation } from '@graphcommerce/graphql'
 import type { LinkOrButtonProps } from '@graphcommerce/next-ui'
-import { LinkOrButton } from '@graphcommerce/next-ui'
+import { LinkOrButton, sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import { DeleteCompareListDocument } from '../graphql/DeleteCompareList.gql'
 import { useCompareList } from '../hooks'
@@ -30,21 +30,11 @@ export function EmptyCompareListButton(props: EmptyCompareListButtonProps) {
       button={{
         variant: 'pill',
         ...button,
-        sx: [
-          {
-            whiteSpace: 'nowrap',
-          },
-          ...(Array.isArray(button.sx) ? button.sx : [button.sx]),
-        ],
+        sx: sxx({ whiteSpace: 'nowrap' }, button.sx),
       }}
       link={{
         ...link,
-        sx: [
-          {
-            whiteSpace: 'nowrap',
-          },
-          ...(Array.isArray(link.sx) ? link.sx : [link.sx]),
-        ],
+        sx: sxx({ whiteSpace: 'nowrap' }, link.sx),
       }}
       onClick={() => {
         go()

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-compare",
   "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": {
@@ -19,20 +19,20 @@
     "./plugins/AddCompareTypePolicies": "./plugins/AddCompareTypePolicies.tsx"
   },
   "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-utils": "^10.0.0-canary.67",
-    "@graphcommerce/graphql": "^10.0.0-canary.67",
-    "@graphcommerce/magento-cart": "^10.0.0-canary.67",
-    "@graphcommerce/magento-product": "^10.0.0-canary.67",
-    "@graphcommerce/next-ui": "^10.0.0-canary.67",
-    "@graphcommerce/prettier-config-pwa": "^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-utils": "^10.0.0-canary.68",
+    "@graphcommerce/graphql": "^10.0.0-canary.68",
+    "@graphcommerce/magento-cart": "^10.0.0-canary.68",
+    "@graphcommerce/magento-product": "^10.0.0-canary.68",
+    "@graphcommerce/next-ui": "^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/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": "*",