@graphcommerce/next-ui 10.0.0-canary.67 → 10.0.0-canary.72

package/ActionCard/ActionCard.tsx

@@ -1,5 +1,5 @@
 import type { BoxProps, ButtonProps, SxProps, Theme } from '@mui/material'
-import { alpha, Box, ButtonBase, lighten } from '@mui/material'
+import { Box, ButtonBase } from '@mui/material'
 import React from 'react'
 import { extendableComponent, responsiveVal } from '../Styles'
 import { breakpointVal } from '../Styles/breakpointVal'
@@ -169,22 +169,31 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
           '&.variantDefault': {
             position: 'relative',
             '&.selected': {
-              backgroundColor:
-                theme.palette.mode === 'light'
-                  ? alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
-                  : lighten(theme.palette.background.default, theme.palette.action.hoverOpacity),
+              backgroundColor: theme.alpha(
+                theme.vars.palette[color].main,
+                theme.vars.palette.action.hoverOpacity,
+              ),
+              ...theme.applyStyles('dark', {
+                backgroundColor: theme.lighten(
+                  theme.vars.palette.background.default,
+                  theme.vars.palette.action.hoverOpacity,
+                ),
+              }),
             },
             '&.error': {
-              backgroundColor: alpha(theme.palette.error.main, theme.palette.action.hoverOpacity),
+              backgroundColor: theme.alpha(
+                theme.vars.palette.error.main,
+                theme.vars.palette.action.hoverOpacity,
+              ),
             },
             '&:focus': {
               outline: 'none',
-              boxShadow: `0 0 0 4px ${alpha(theme.palette[color].main, theme.palette.action.focusOpacity)}`,
+              boxShadow: `0 0 0 4px ${theme.alpha(theme.vars.palette[color].main, theme.vars.palette.action.focusOpacity)}`,
             },
           },
           '&.variantOutlined': {
-            backgroundColor: theme.palette.background.paper,
-            boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`,
+            backgroundColor: theme.vars.palette.background.paper,
+            boxShadow: `inset 0 0 0 1px ${theme.vars.palette.divider}`,
             // '&:not(:last-of-type)': {
             //   marginBottom: '-2px',
             // },
@@ -221,23 +230,23 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
             },
             '&.selected': {
               borderColor: 'transparent',
-              boxShadow: `inset 0 0 0 2px ${theme.palette[color].main}`,
+              boxShadow: `inset 0 0 0 2px ${theme.vars.palette[color].main}`,
             },
             '&.selected:focus, &.error:focus': {
               borderColor: 'transparent',
-              boxShadow: `inset 0 0 0 2px ${theme.palette[color].main}, 0 0 0 4px ${alpha(
-                theme.palette[color].main,
-                theme.palette.action.hoverOpacity,
+              boxShadow: `inset 0 0 0 2px ${theme.vars.palette[color].main}, 0 0 0 4px ${theme.alpha(
+                theme.vars.palette[color].main,
+                theme.vars.palette.action.hoverOpacity,
               )}`,
             },
             '&:focus': {
-              boxShadow: `inset 0 0 0 1px ${theme.palette.divider},0 0 0 4px ${alpha(
-                theme.palette[color].main,
-                theme.palette.action.hoverOpacity,
+              boxShadow: `inset 0 0 0 1px ${theme.vars.palette.divider},0 0 0 4px ${theme.alpha(
+                theme.vars.palette[color].main,
+                theme.vars.palette.action.hoverOpacity,
               )}`,
             },
             '&.error': {
-              boxShadow: `inset 0 0 0 2px ${theme.palette.error.main}`,
+              boxShadow: `inset 0 0 0 2px ${theme.vars.palette.error.main}`,
             },
           },
           '&.selected': {
@@ -247,9 +256,9 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
             zIndex: 2,
           },
           '&.disabled': {
-            background: theme.palette.action.disabledBackground,
-            opacity: theme.palette.action.disabledOpacity,
-            color: theme.palette.action.disabled,
+            background: theme.vars.palette.action.disabledBackground,
+            opacity: theme.vars.palette.action.disabledOpacity,
+            color: theme.vars.palette.action.disabled,
           },
         }),
         sx,
@@ -353,7 +362,7 @@ export function ActionCard<C extends React.ElementType = typeof Box>(props: Acti
             <Box
               className={classes.action}
               sx={sxx(
-                (theme) => ({ marginBottom: '5px', color: theme.palette[color].main }),
+                (theme) => ({ marginBottom: '5px', color: theme.vars.palette[color].main }),
                 slotProps.action?.sx,
               )}
               {...slotProps.action}

package/ActionCard/ActionCardAccordion.tsx

@@ -32,8 +32,8 @@ export function ActionCardAccordion(props: ActionCardAccordionProps) {
           '&.Mui-expanded': { my: 0 },
           '::before': { display: 'none' },
           border: 'none',
-          borderBottom: `1px solid ${theme.palette.divider}`,
-          '&:not(.Mui-expanded)': { borderBottom: `1px solid ${theme.palette.divider}` },
+          borderBottom: `1px solid ${theme.vars.palette.divider}`,
+          '&:not(.Mui-expanded)': { borderBottom: `1px solid ${theme.vars.palette.divider}` },
         }),
         sx,
       )}

package/ActionCard/ActionCardLayout.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { BoxProps } from '@mui/material'
 import { Box } from '@mui/material'
 import React from 'react'
@@ -28,7 +29,7 @@ export const ActionCardLayout = React.forwardRef<HTMLDivElement, ActionCardLayou
         ref={ref}
         {...boxProps}
         className={`${classes.root} ${className}`}
-        sx={[
+        sx={sxx(
           (theme) => ({
             '&.layoutStack': {
               display: 'grid',
@@ -51,8 +52,8 @@ export const ActionCardLayout = React.forwardRef<HTMLDivElement, ActionCardLayou
               gap: theme.spacings.xxs,
             },
           }),
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+          sx,
+        )}
       />
     )
   },

package/ActionCard/ActionCardList.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Alert } from '@mui/material'
@@ -160,7 +161,6 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
             })
           })}
         </ActionCardLayout>
-
         {childActionCards.length > showMoreAfter && (
           <Button
             sx={{ width: 'fit-content' }}
@@ -170,15 +170,22 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
           >
             {!show ? <Trans>More options</Trans> : <Trans>Less options</Trans>}{' '}
             <IconSvg
-              sx={{
-                transform: show ? 'rotate(180deg)' : 'rotate(0deg)',
-                transition: 'transform 0.3s ease-in-out',
-              }}
+              sx={sxx(
+                {
+                  transition: 'transform 0.3s ease-in-out',
+                },
+                show
+                  ? {
+                      transform: 'rotate(180deg)',
+                    }
+                  : {
+                      transform: 'rotate(0deg)',
+                    },
+              )}
               src={iconChevronDown}
             />
           </Button>
         )}
-
         {error && errorMessage && (
           <Alert
             severity='error'

package/Blog/BlogAuthor/BlogAuthor.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Avatar, Box, Chip } from '@mui/material'
 import { DateFormat } from '../../Intl/DateTimeFormat'
@@ -14,16 +15,17 @@ export function BlogAuthor(props: BlogAuthorProps) {
 
   return (
     <Box
-      maxWidth='md'
-      sx={[
+      sx={sxx(
         {
+          maxWidth: 'md',
+        },
+        (theme) => ({
           display: 'flex',
           justifyContent: 'left',
           margin: '0 auto',
-          marginBottom: (theme) => theme.spacings.md,
-        },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+          marginBottom: theme.spacings.md,
+        }),
+      )}
     >
       <Chip
         sx={{
@@ -46,7 +48,7 @@ export function BlogAuthor(props: BlogAuthorProps) {
             <Box slot='Author' sx={{ lineHeight: 1.4 }}>
               {author}
             </Box>
-            <Box sx={(theme) => ({ lineHeight: 1.4, color: theme.palette.text.disabled })}>
+            <Box sx={(theme) => ({ lineHeight: 1.4, color: theme.vars.palette.text.disabled })}>
               <DateFormat dateStyle='long' date={date} />
             </Box>
           </section>

package/Blog/BlogContent/BlogContent.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 
@@ -11,14 +12,16 @@ export function BlogContent(props: BlogContentProps) {
 
   return (
     <Box
-      maxWidth='md'
-      sx={[
+      sx={sxx(
+        {
+          maxWidth: 'md',
+        },
         (theme) => ({
           margin: '0 auto',
           marginBottom: theme.spacings.sm,
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {children}
     </Box>

package/Blog/BlogHeader/BlogHeader.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import React from 'react'
@@ -19,8 +20,10 @@ export function BlogHeader(props: BlogHeaderProps) {
   return (
     <Box
       className={classes.header}
-      maxWidth='md'
-      sx={[
+      sx={sxx(
+        {
+          maxWidth: 'md',
+        },
         (theme) => ({
           margin: '0 auto',
           marginBottom: theme.spacings.md,
@@ -34,8 +37,8 @@ export function BlogHeader(props: BlogHeaderProps) {
             ),
           },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {asset}
     </Box>

package/Blog/BlogList/BlogList.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { ContainerProps } from '@mui/material'
 import { Row } from '../../Row/Row'
 
@@ -8,14 +9,14 @@ export function BlogItemGrid(props: BlogItemGridProps) {
 
   return (
     <Row
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'grid',
           gap: theme.spacings.md,
           gridTemplateColumns: { xs: 'repeat(2, 1fr)', md: 'repeat(3, 1fr)', lg: 'repeat(4, 1fr)' },
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
       {...containerProps}
     />
   )

package/Blog/BlogListItem/BlogListItem.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Link, Typography } from '@mui/material'
 import React from 'react'
@@ -23,17 +24,17 @@ export function BlogListItem(props: BlogListItemProps) {
   return (
     <Box
       className={classes.item}
-      sx={[
+      sx={sxx(
         (theme) => ({
           display: 'grid',
           gridTemplateRows: 'auto auto auto',
           alignContent: 'start',
-          color: theme.palette.text.primary,
+          color: theme.vars.palette.text.primary,
           gap: theme.spacings.xxs,
           marginBottom: theme.spacings.sm,
         }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       <Link href={`/${url}`} color='inherit' underline='hover'>
         <Box
@@ -63,7 +64,7 @@ export function BlogListItem(props: BlogListItemProps) {
           sx={(theme) => ({
             display: 'inline-block',
             textDecoration: 'none',
-            color: theme.palette.text.secondary,
+            color: theme.vars.palette.text.secondary,
           })}
         >
           <DateFormat dateStyle='long' date={date} />

package/Blog/BlogTags/BlogTag.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { SxProps, Theme } from '@mui/material'
 import { Chip } from '@mui/material'
 import { NextLink } from '../../Theme'
@@ -22,10 +23,7 @@ export function BlogTag(props: BlogTagsProps) {
       href={`/${url}`}
       component={NextLink}
       label={title}
-      sx={[
-        { marginRight: 3, borderRadius: 2, cursor: 'pointer' },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+      sx={sxx({ marginRight: 3, borderRadius: 2, cursor: 'pointer' }, sx)}
     />
   )
 }

package/Blog/BlogTitle/BlogTitle.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import { Box } from '@mui/material'
 import React from 'react'
 import { LayoutTitle } from '../../Layout'
@@ -8,12 +9,7 @@ export function BlogTitle(props: BlogTitleProps) {
   const { sx = [], children } = props
 
   return (
-    <Box
-      sx={[
-        (theme) => ({ maxWidth: theme.breakpoints.values.md, margin: '0 auto' }),
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
-    >
+    <Box sx={sxx((theme) => ({ maxWidth: theme.breakpoints.values.md, margin: '0 auto' }), sx)}>
       <LayoutTitle variant='h1'>{children}</LayoutTitle>
     </Box>
   )

package/Breadcrumbs/Breadcrumbs.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import { t } from '@lingui/core/macro'
 import { Trans } from '@lingui/react/macro'
 import type {
@@ -85,8 +86,7 @@ export function Breadcrumbs(props: BreadcrumbsProps) {
       aria-label={t`Breadcrumbs`}
       maxItems={maxItems}
       color='inherit'
-      sx={[
-        {},
+      sx={sxx(
         !maxItems && {
           '& .MuiBreadcrumbs-ol': {
             flexWrap: 'nowrap',
@@ -106,30 +106,32 @@ export function Breadcrumbs(props: BreadcrumbsProps) {
           '& .MuiBreadcrumbs-separator': {
             '&:nth-of-type(2)': {
               display: {
-                xs: !showButtonMobile && 'none',
-                md: !showButtonDesktop && 'none',
+                xs: showButtonMobile ? undefined : 'none',
+                md: showButtonDesktop ? undefined : 'none',
               },
             },
           },
-
-          [theme.breakpoints.down('md')]: showButtonMobile && {
-            '& .MuiBreadcrumbs-li, & .MuiBreadcrumbs-separator': {
-              display: 'none',
-              [`&:nth-last-of-type(-n+${effectiveBreadcrumbsAmountMobile * 2})`]: {
-                display: 'flex',
+        },
+        !maxItems &&
+          showButtonMobile && {
+            [theme.breakpoints.down('md')]: {
+              '& .MuiBreadcrumbs-li, & .MuiBreadcrumbs-separator': {
+                display: 'none',
+                [`&:nth-last-of-type(-n+${effectiveBreadcrumbsAmountMobile * 2})`]: {
+                  display: 'flex',
+                },
               },
             },
           },
-
-          [theme.breakpoints.up('md')]: showButtonDesktop && {
-            '& .MuiBreadcrumbs-li, & .MuiBreadcrumbs-separator': {
-              display: 'none',
-              [`&:nth-last-of-type(-n+${breadcrumbsAmountDesktop * 2})`]: {
-                display: 'flex',
+        !maxItems &&
+          showButtonDesktop && {
+            [theme.breakpoints.up('md')]: {
+              '& .MuiBreadcrumbs-li, & .MuiBreadcrumbs-separator': {
+                display: 'none',
+                [`&:nth-last-of-type(-n+${breadcrumbsAmountDesktop * 2})`]: { display: 'flex' },
               },
             },
           },
-        },
         // Hide the last item and its separator on mobile
         hideLastOnMobile && {
           [theme.breakpoints.down('md')]: {
@@ -141,8 +143,8 @@ export function Breadcrumbs(props: BreadcrumbsProps) {
             },
           },
         },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
     >
       {!maxItems && (
         <ClickAwayListener
@@ -180,15 +182,8 @@ export function Breadcrumbs(props: BreadcrumbsProps) {
           </Box>
         </ClickAwayListener>
       )}
-
       {disableHome ? null : (
-        <Link
-          href='/'
-          color='inherit'
-          underline='hover'
-          {...linkProps}
-          sx={[...(Array.isArray(itemSx) ? itemSx : [itemSx])]}
-        >
+        <Link href='/' color='inherit' underline='hover' {...linkProps} sx={sxx(itemSx)}>
           <Trans>Home</Trans>
         </Link>
       )}
@@ -199,22 +194,13 @@ export function Breadcrumbs(props: BreadcrumbsProps) {
           underline='hover'
           {...breadcrumb}
           {...linkProps}
-          sx={[
-            ...(Array.isArray(breadcrumb.sx) ? breadcrumb.sx : [breadcrumb.sx]),
-            ...(Array.isArray(itemSx) ? itemSx : [itemSx]),
-          ]}
+          sx={sxx(breadcrumb.sx, itemSx)}
         >
           {breadcrumb.name}
         </Link>
       ))}
-
       {last && (
-        <Typography
-          component='span'
-          noWrap
-          color='inherit'
-          sx={[{ fontWeight: '600' }, ...(Array.isArray(itemSx) ? itemSx : [itemSx])]}
-        >
+        <Typography component='span' noWrap color='inherit' sx={sxx({ fontWeight: '600' }, itemSx)}>
           {last.name}
         </Typography>
       )}

package/Breadcrumbs/BreadcrumbsList.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/react/macro'
-import { alpha, Box, Link, useTheme } from '@mui/material'
+import { Box, Link, useTheme } from '@mui/material'
 import type { KeyboardEvent } from 'react'
 import { useEffect, useRef } from 'react'
 import type { BreadcrumbsType } from './types'
@@ -34,7 +34,7 @@ export function BreadcrumbsList(props: PopperBreadcrumbsListProps) {
       ref={listRef}
       onKeyDown={handleKeyDown}
       tabIndex={-1}
-      sx={{
+      sx={(theme) => ({
         backgroundColor: 'background.paper',
         borderRadius: 3,
         boxShadow: 12,
@@ -56,7 +56,7 @@ export function BreadcrumbsList(props: PopperBreadcrumbsListProps) {
             },
           },
         },
-      }}
+      })}
     >
       <Link
         href='/'
@@ -66,13 +66,13 @@ export function BreadcrumbsList(props: PopperBreadcrumbsListProps) {
         noWrap
         onClick={onClose}
         tabIndex={0}
-        sx={{
+        sx={(theme) => ({
           flex: 1,
           padding: `calc(${theme.spacings.xxs} / 2) ${theme.spacings.xs}`,
           '&:hover': {
-            backgroundColor: alpha(theme.palette.action.hover, 0.025),
+            backgroundColor: theme.alpha(theme.vars.palette.action.hover, 0.025),
           },
-        }}
+        })}
       >
         <Trans>Home</Trans>
       </Link>
@@ -86,13 +86,13 @@ export function BreadcrumbsList(props: PopperBreadcrumbsListProps) {
           noWrap
           onClick={onClose}
           tabIndex={0}
-          sx={{
+          sx={(theme) => ({
             flex: 1,
             padding: `calc(${theme.spacings.xxs} / 2) ${theme.spacings.xs}`,
             '&:hover': {
-              backgroundColor: alpha(theme.palette.action.hover, 0.025),
+              backgroundColor: theme.alpha(theme.vars.palette.action.hover, 0.025),
             },
-          }}
+          })}
         >
           {breadcrumb.name}
         </Link>

package/Button/Button.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react/forbid-foreign-prop-types */
-import type { LoadingButtonProps, LoadingButtonTypeMap } from '@mui/lab'
-import { LoadingButton as Button } from '@mui/lab'
+import type { ButtonTypeMap, ButtonProps as MuiButtonProps } from '@mui/material'
+import { Button } from '@mui/material'
 
 export type ButtonProps<
-  D extends React.ElementType = LoadingButtonTypeMap['defaultComponent'],
+  D extends React.ElementType = ButtonTypeMap['defaultComponent'],
   P = object,
-> = LoadingButtonProps<D, P>
+> = MuiButtonProps<D, P>
 
 export { Button }

package/Button/LinkOrButton.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { Breakpoint, LinkProps } from '@mui/material'
 import { Link, useForkRef } from '@mui/material'
 import React, { useRef } from 'react'
@@ -60,15 +61,15 @@ export const LinkOrButton = React.forwardRef<
         color={color}
         loading={loading}
         disabled={disabled}
-        sx={[
+        sx={sxx(
           {
             display: {
               xs: 'none',
               [breakpoint]: 'inline-flex',
             },
           },
-          ...(Array.isArray(buttonSx) ? buttonSx : [buttonSx]),
-        ]}
+          buttonSx,
+        )}
       >
         {children}
       </Button>
@@ -81,18 +82,18 @@ export const LinkOrButton = React.forwardRef<
         {...link}
         color={loading || disabled ? 'action.disabled' : color}
         aria-disabled={loading || disabled}
-        sx={[
+        sx={sxx(
           {
             display: { xs: 'inline-flex', [breakpoint]: 'none' },
             alignItems: 'center',
           },
           !!disabled &&
             ((theme) => ({
-              opacity: theme.palette.action.disabledOpacity,
+              opacity: theme.vars.palette.action.disabledOpacity,
               pointerEvents: 'none',
             })),
-          ...(Array.isArray(linkSx) ? linkSx : [linkSx]),
-        ]}
+          linkSx,
+        )}
       >
         {startIcon}
         <span>{children}</span>

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Change Log
 
+## 10.0.0-canary.72
+
+## 10.0.0-canary.71
+
+## 10.0.0-canary.70
+
+### Major Changes
+
+- [#2565](https://github.com/graphcommerce-org/graphcommerce/pull/2565) [`c96dfcd`](https://github.com/graphcommerce-org/graphcommerce/commit/c96dfcdca981baca387c270ad9e2b9515cdd00cc) - Updated to Apollo Client 4 ([@paales](https://github.com/paales))
+
+## 10.0.0-canary.69
+
+### Patch Changes
+
+- [#2567](https://github.com/graphcommerce-org/graphcommerce/pull/2567) [`a0ba773`](https://github.com/graphcommerce-org/graphcommerce/commit/a0ba773171bb76c7a998deb5bbacd974e5a3764d) - Fix LayoutOverlayHeader2 text overflowing beyond overlay size constraints ([@paales](https://github.com/paales))
+
+- [#2567](https://github.com/graphcommerce-org/graphcommerce/pull/2567) [`4908a45`](https://github.com/graphcommerce-org/graphcommerce/commit/4908a457cac15c429d83d6b9274a8be9c8277ef6) - Allow setting OverlayContainer props, such as event listeners ([@paales](https://github.com/paales))
+
+## 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