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

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @graphcommerce/ecommerce-ui
 
+## 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) [`0af3466`](https://github.com/graphcommerce-org/graphcommerce/commit/0af34663f882ad9906dc13ae6c835c158598b945) - Fix NumberFieldElement plus button decreasing the number instead of increasing ([@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

package/components/ApolloError/ApolloErrorAlert.tsx

@@ -1,5 +1,6 @@
-import type { ApolloError } from '@graphcommerce/graphql'
 import { extendableComponent } from '@graphcommerce/next-ui/Styles/extendableComponent'
+import type { ErrorLike } from '@apollo/client'
+import { CombinedGraphQLErrors } from '@apollo/client/errors'
 import type { AlertProps, SxProps, Theme } from '@mui/material'
 import { Alert, Box } from '@mui/material'
 import { maskNetworkError } from './maskNetworkError'
@@ -7,7 +8,7 @@ import { maskNetworkError } from './maskNetworkError'
 const { classes, selectors } = extendableComponent('ApolloErrorAlert', ['root', 'alert'] as const)
 
 export type ApolloErrorAlertProps = {
-  error?: ApolloError | null
+  error?: ErrorLike | null
   graphqlErrorAlertProps?: Omit<AlertProps, 'severity'>
   networkErrorAlertProps?: Omit<AlertProps, 'severity'>
   sx?: SxProps<Theme>
@@ -15,48 +16,50 @@ export type ApolloErrorAlertProps = {
 export function ApolloErrorAlert(props: ApolloErrorAlertProps) {
   const { error, graphqlErrorAlertProps, networkErrorAlertProps, sx } = props
 
+  if (!error) return null
+
+  // Check if this is a CombinedGraphQLErrors
+  const isGraphQLError = CombinedGraphQLErrors.is(error)
+  const graphQLErrors = isGraphQLError ? error.errors : []
+
   return (
-    <>
-      {error && (
-        <Box key='alerts'>
-          <Box sx={sx} className={classes.root}>
-            {error.graphQLErrors.map((e, index) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <Box key={index}>
-                <div className={classes.alert}>
-                  <Alert
-                    severity='error'
-                    {...graphqlErrorAlertProps}
-                    sx={(theme) => ({
-                      borderRadius: theme.shape.borderRadius * 1,
-                      marginTop: 0.5,
-                    })}
-                  >
-                    {e.message}
-                  </Alert>
-                </div>
-              </Box>
-            ))}
-            {error.networkError && (
-              <Box key='networkError'>
-                <Box
-                  sx={(theme) => ({
-                    paddingTop: theme.spacings.xxs,
-                    paddingBottom: theme.spacings.xxs,
-                  })}
-                  className={classes.alert}
-                  key='networkError'
-                >
-                  <Alert severity='error' {...networkErrorAlertProps}>
-                    {maskNetworkError(error.networkError)}
-                  </Alert>
-                </Box>
-              </Box>
-            )}
+    <Box key='alerts'>
+      <Box sx={sx} className={classes.root}>
+        {graphQLErrors.map((e, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <Box key={index}>
+            <div className={classes.alert}>
+              <Alert
+                severity='error'
+                {...graphqlErrorAlertProps}
+                sx={(theme) => ({
+                  borderRadius: theme.shape.borderRadius * 1,
+                  marginTop: 0.5,
+                })}
+              >
+                {e.message}
+              </Alert>
+            </div>
+          </Box>
+        ))}
+        {!isGraphQLError && error && (
+          <Box key='networkError'>
+            <Box
+              sx={(theme) => ({
+                paddingTop: theme.spacings.xxs,
+                paddingBottom: theme.spacings.xxs,
+              })}
+              className={classes.alert}
+              key='networkError'
+            >
+              <Alert severity='error' {...networkErrorAlertProps}>
+                {maskNetworkError(error)}
+              </Alert>
+            </Box>
           </Box>
-        </Box>
-      )}
-    </>
+        )}
+      </Box>
+    </Box>
   )
 }
 

package/components/ApolloError/ApolloErrorFullPage.tsx

@@ -1,13 +1,14 @@
-import type { ApolloError } from '@graphcommerce/graphql'
 import type { FullPageMessageProps } from '@graphcommerce/next-ui'
 import { FullPageMessage } from '@graphcommerce/next-ui'
+import type { ErrorLike } from '@apollo/client'
+import { CombinedGraphQLErrors } from '@apollo/client/errors'
 import { Trans } from '@lingui/react/macro'
 import type { AlertProps } from '@mui/material'
 import { ApolloErrorAlert } from './ApolloErrorAlert'
 import { maskNetworkError } from './maskNetworkError'
 
 export type ApolloErrorFullPageProps = {
-  error: ApolloError
+  error: ErrorLike
   graphqlErrorAlertProps?: Omit<AlertProps, 'severity'>
   networkErrorAlertProps?: Omit<AlertProps, 'severity'>
 } & Omit<FullPageMessageProps, 'title' | 'description'>
@@ -21,14 +22,17 @@ export function ApolloErrorFullPage(props: ApolloErrorFullPageProps) {
     ...fullPageMessageProps
   } = props
 
-  const errorCount = (error?.graphQLErrors?.length ?? 0) + (error?.networkError ? 1 : 0)
+  // Check if this is a CombinedGraphQLErrors
+  const isGraphQLError = CombinedGraphQLErrors.is(error)
+  const graphQLErrors = isGraphQLError ? error.errors : []
+  const errorCount = graphQLErrors.length + (isGraphQLError ? 0 : 1)
 
   if (errorCount === 0) return null
 
   if (errorCount === 1) {
     return (
       <FullPageMessage
-        title={error?.graphQLErrors?.[0]?.message ?? maskNetworkError(error.networkError)}
+        title={graphQLErrors[0]?.message ?? maskNetworkError(error)}
         {...fullPageMessageProps}
       >
         {children}

package/components/ApolloError/ApolloErrorSnackbar.tsx

@@ -1,10 +1,11 @@
-import type { ApolloError } from '@graphcommerce/graphql'
 import type { ErrorSnackbarProps } from '@graphcommerce/next-ui'
 import { ErrorSnackbar } from '@graphcommerce/next-ui'
+import type { ErrorLike } from '@apollo/client'
+import { CombinedGraphQLErrors } from '@apollo/client/errors'
 import { maskNetworkError } from './maskNetworkError'
 
 export type ApolloErrorSnackbarProps = {
-  error?: ApolloError | null
+  error?: ErrorLike | null
 } & Pick<ErrorSnackbarProps, 'action' | 'onClose'>
 
 export function ApolloErrorSnackbar(props: ApolloErrorSnackbarProps) {
@@ -12,11 +13,15 @@ export function ApolloErrorSnackbar(props: ApolloErrorSnackbarProps) {
 
   if (!error) return null
 
+  // Check if this is a CombinedGraphQLErrors
+  const isGraphQLError = CombinedGraphQLErrors.is(error)
+  const graphQLErrors = isGraphQLError ? error.errors : []
+
   return (
     <ErrorSnackbar variant='pill' severity='error' {...passedProps} open={!!error}>
       <>
-        {error.graphQLErrors.map((e) => e.message).join(', ')}
-        {maskNetworkError(error.networkError)}
+        {graphQLErrors.map((e) => e.message).join(', ')}
+        {!isGraphQLError && maskNetworkError(error)}
       </>
     </ErrorSnackbar>
   )

package/components/ApolloError/maskNetworkError.tsx

@@ -1,24 +1,15 @@
-import type { ServerError, ServerParseError } from '@graphcommerce/graphql'
+import type { ErrorLike } from '@apollo/client'
+import { ServerError, ServerParseError } from '@apollo/client/errors'
 import { Trans } from '@lingui/react/macro'
 
-function isServerError(error: Error | ServerParseError | ServerError | null): error is ServerError {
-  return 'name' in (error as ServerError)
-}
-
-function isServerParseError(
-  error: Error | ServerParseError | ServerError | null,
-): error is ServerParseError {
-  return 'bodyText' in (error as ServerParseError)
-}
-
-export function maskNetworkError(networkError: Error | ServerParseError | ServerError | null) {
-  if (!networkError) return null
+export function maskNetworkError(error: ErrorLike | null) {
+  if (!error) return null
 
   if (process.env.NODE_ENV === 'development') {
-    console.log(networkError)
+    console.log(error)
   }
 
-  if (isServerParseError(networkError) || isServerError(networkError)) {
+  if (ServerParseError.is(error) || ServerError.is(error)) {
     return <Trans>Something went wrong on the server, please try again later.</Trans>
   }
 

package/components/FormComponents/CheckboxButtonGroup.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
 import { t } from '@lingui/core/macro'
@@ -95,7 +96,15 @@ function CheckboxButtonGroupBase(props: CheckboxButtonGroupProps) {
             <FormControlLabel
               control={
                 <Checkbox
-                  sx={{ color: invalid ? theme.palette.error.main : undefined }}
+                  sx={sxx(
+                    invalid
+                      ? {
+                          color: theme.vars.palette.error.main,
+                        }
+                      : {
+                          color: null,
+                        },
+                  )}
                   color={checkboxColor || 'primary'}
                   value={optionKey}
                   checked={isChecked}

package/components/FormComponents/CheckboxElement.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
 import { t } from '@lingui/core/macro'
@@ -76,10 +77,7 @@ function CheckboxElementBase(props: CheckboxElementProps): React.ReactNode {
               name={name}
               inputRef={useForkRef(ref, rest.inputRef)}
               color={rest.color || 'primary'}
-              sx={{
-                ...(Array.isArray(sx) ? sx : [sx]),
-                color: invalid ? 'error.main' : undefined,
-              }}
+              sx={sxx(sx, invalid && { color: 'error.main' })}
               value={value}
               checked={!!value}
               onChange={() => onChange(!value)}

package/components/FormComponents/MultiSelectElement.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import { iconClose, IconSvg } from '@graphcommerce/next-ui'
+import { iconClose, IconSvg, sxx } from '@graphcommerce/next-ui'
 import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
 import { t } from '@lingui/core/macro'
@@ -153,10 +153,15 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
             <MenuItem
               key={val}
               value={val}
-              sx={{
-                fontWeight: (theme) =>
-                  isChecked ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,
-              }}
+              sx={sxx(
+                isChecked
+                  ? {
+                      fontWeight: theme.typography.fontWeightBold,
+                    }
+                  : {
+                      fontWeight: theme.typography.fontWeightRegular,
+                    },
+              )}
             >
               {showCheckbox && <Checkbox checked={isChecked} />}
               <ListItemText primary={item[itemLabel] || item} />

package/components/FormComponents/NumberFieldElement.tsx

@@ -4,6 +4,7 @@ import {
   iconPlus,
   IconSvg,
   responsiveVal,
+  sxx,
 } from '@graphcommerce/next-ui'
 import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
@@ -104,14 +105,10 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
       size={size}
       type='number'
       className={`${rest.className ?? ''} ${classes.quantity}`}
-      sx={[
+      sx={sxx(
         {
           width: responsiveVal(90, 120),
-        },
-        {
-          '& input[type=number]': {
-            MozAppearance: 'textfield',
-          },
+          '& input[type=number]': { MozAppearance: 'textfield' },
           '& .MuiOutlinedInput-root': {
             px: '2px',
             display: 'grid',
@@ -119,78 +116,93 @@ function NumberFieldElementBase(props: NumberFieldElementProps) {
           },
         },
         variant === 'standard' && {
-          '& .MuiOutlinedInput-input': {
-            padding: 0,
-          },
-          '& .MuiOutlinedInput-notchedOutline': {
-            display: 'none',
-          },
+          '& .MuiOutlinedInput-input': { padding: 0 },
+          '& .MuiOutlinedInput-notchedOutline': { display: 'none' },
         },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+        sx,
+      )}
       autoComplete='off'
-      InputProps={{
-        ...InputPropsFiltered,
-        startAdornment: (
-          <Fab
-            aria-label={t`Decrease`}
-            size='smaller'
-            onClick={() => {
-              if (
-                (valueAsNumber ?? Infinity) <= inputProps.min ||
-                (inputProps.min === 0 && valueAsNumber <= inputProps.min)
-              )
-                return
-              // Round to nearest step with precision fix
-              const newValue = roundToPrecision(Math.round((valueAsNumber - step) / step) * step)
-              onChange(newValue)
-            }}
-            sx={{
-              boxShadow: variant === 'standard' ? 4 : 0,
-              minHeight: '30px',
-              minWidth: '30px',
-            }}
-            tabIndex={-1}
-            color='inherit'
-            {...DownProps}
-            className={`${classes.button} ${DownProps.className ?? ''}`}
-          >
-            {DownProps.children ?? <IconSvg src={iconMin} size='small' />}
-          </Fab>
-        ),
-        endAdornment: (
-          <Fab
-            aria-label={t`Increase`}
-            size='smaller'
-            onClick={() => {
-              if (valueAsNumber >= (inputProps.max ?? Infinity)) return
-              // Round to nearest step with precision fix
-              const newValue = roundToPrecision(Math.round((valueAsNumber + step) / step) * step)
-              onChange(newValue)
-            }}
-            sx={{
-              boxShadow: variant === 'standard' ? 4 : 0,
-              minHeight: '30px',
-              minWidth: '30px',
-            }}
-            tabIndex={-1}
-            color='inherit'
-            {...UpProps}
-            className={`${classes.button} ${UpProps.className ?? ''}`}
-          >
-            {UpProps.children ?? <IconSvg src={iconPlus} size='small' />}
-          </Fab>
-        ),
-      }}
-      inputProps={{
-        'aria-label': t`Number`,
-        ...inputProps,
-        className: `${inputProps?.className ?? ''} ${classes.quantityInput}`,
-        sx: {
-          typography: 'body1',
-          textAlign: 'center',
-          '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
-            appearance: 'none',
+      slotProps={{
+        input: {
+          ...InputPropsFiltered,
+          startAdornment: (
+            <Fab
+              aria-label={t`Decrease`}
+              size='smaller'
+              onClick={() => {
+                if (
+                  (valueAsNumber ?? Infinity) <= inputProps.min ||
+                  (inputProps.min === 0 && valueAsNumber <= inputProps.min)
+                )
+                  return
+                // Round to nearest step with precision fix
+                const newValue = roundToPrecision(Math.round((valueAsNumber - step) / step) * step)
+                onChange(newValue)
+              }}
+              sx={sxx(
+                {
+                  minHeight: '30px',
+                  minWidth: '30px',
+                },
+                variant === 'standard'
+                  ? {
+                      boxShadow: 4,
+                    }
+                  : {
+                      boxShadow: 0,
+                    },
+              )}
+              tabIndex={-1}
+              color='inherit'
+              {...DownProps}
+              className={`${classes.button} ${DownProps.className ?? ''}`}
+            >
+              {DownProps.children ?? <IconSvg src={iconMin} size='small' />}
+            </Fab>
+          ),
+          endAdornment: (
+            <Fab
+              aria-label={t`Increase`}
+              size='smaller'
+              onClick={() => {
+                if (valueAsNumber >= (inputProps.max ?? Infinity)) return
+                // Round to nearest step with precision fix
+                const newValue = roundToPrecision(Math.round((valueAsNumber + step) / step) * step)
+                onChange(newValue)
+              }}
+              sx={sxx(
+                {
+                  minHeight: '30px',
+                  minWidth: '30px',
+                },
+                variant === 'standard'
+                  ? {
+                      boxShadow: 4,
+                    }
+                  : {
+                      boxShadow: 0,
+                    },
+              )}
+              tabIndex={-1}
+              color='inherit'
+              {...UpProps}
+              className={`${classes.button} ${UpProps.className ?? ''}`}
+            >
+              {UpProps.children ?? <IconSvg src={iconPlus} size='small' />}
+            </Fab>
+          ),
+        },
+
+        htmlInput: {
+          'aria-label': t`Number`,
+          ...inputProps,
+          className: `${inputProps?.className ?? ''} ${classes.quantityInput}`,
+          sx: {
+            typography: 'body1',
+            textAlign: 'center',
+            '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
+              appearance: 'none',
+            },
           },
         },
       }}

package/components/FormComponents/RadioButtonGroup.tsx

@@ -1,3 +1,4 @@
+import { sxx } from '@graphcommerce/next-ui'
 import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
 import { t } from '@lingui/core/macro'
@@ -90,9 +91,15 @@ function RadioButtonGroupBase(props: RadioButtonGroupProps): React.ReactNode {
           <FormControlLabel
             control={
               <Radio
-                sx={{
-                  color: invalid ? theme.palette.error.main : undefined,
-                }}
+                sx={sxx(
+                  invalid
+                    ? {
+                        color: theme.vars.palette.error.main,
+                      }
+                    : {
+                        color: null,
+                      },
+                )}
                 checked={!value}
               />
             }
@@ -107,9 +114,15 @@ function RadioButtonGroupBase(props: RadioButtonGroupProps): React.ReactNode {
               control={
                 <Radio
                   disabled={disabled}
-                  sx={{
-                    color: invalid ? theme.palette.error.main : undefined,
-                  }}
+                  sx={sxx(
+                    invalid
+                      ? {
+                          color: theme.vars.palette.error.main,
+                        }
+                      : {
+                          color: null,
+                        },
+                  )}
                   checked={value === optionKey}
                 />
               }

package/components/FormComponents/TextFieldElement.tsx

@@ -100,7 +100,6 @@ function TextFieldElementBase(props: TextFieldElementProps): React.ReactNode {
       onBlur={onBlur}
       name={name}
       value={toValue(value, type)}
-      inputProps={{ ...rest.inputProps, onAnimationStart }}
       onChange={(ev) => {
         let changeValue: string | number | Date = ev.target.value
 
@@ -126,15 +125,19 @@ function TextFieldElementBase(props: TextFieldElementProps): React.ReactNode {
       type={type}
       error={Boolean(error) || rest.error}
       helperText={error ? error.message : rest.helperText}
-      InputLabelProps={{ ...rest.InputLabelProps, shrink }}
-      InputProps={{
-        ...rest.InputProps,
-        endAdornment:
-          showValid && Boolean(value) && !error ? (
-            <InputCheckmark show={!error} />
-          ) : (
-            rest.InputProps?.endAdornment
-          ),
+      slotProps={{
+        input: {
+          ...rest.InputProps,
+          endAdornment:
+            showValid && Boolean(value) && !error ? (
+              <InputCheckmark show={!error} />
+            ) : (
+              rest.InputProps?.endAdornment
+            ),
+        },
+
+        htmlInput: { ...rest.inputProps, onAnimationStart },
+        inputLabel: { ...rest.InputLabelProps, shrink },
       }}
     />
   )

package/components/PreviewMode/LightTooltip.tsx

@@ -4,8 +4,8 @@ export const LightTooltip = styled<typeof Tooltip>(({ className, ...props }) =>
   <Tooltip {...props} classes={{ popper: className }} />
 ))(({ theme }) => ({
   [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: theme.palette.common.white,
-    color: theme.palette.text.primary,
+    backgroundColor: theme.vars.palette.common.white,
+    color: theme.vars.palette.text.primary,
     boxShadow: theme.shadows[1],
   },
 }))

package/components/WaitForQueries/WaitForQueries.tsx

@@ -1,10 +1,10 @@
-import type { QueryResult } from '@graphcommerce/graphql'
+import type { ApolloClient, useQuery } from '@graphcommerce/graphql'
 import { useIsSSR } from '@graphcommerce/next-ui'
 import React from 'react'
 
 export type WaitForQueriesProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  waitFor: QueryResult<any, any> | boolean | (QueryResult<any, any> | boolean)[] | undefined
+  waitFor: useQuery.Result<any, any> | boolean | (useQuery.Result<any, any> | boolean)[] | undefined
   children: React.ReactNode
   fallback?: React.ReactNode
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.0.0-canary.67",
+  "version": "10.0.0-canary.72",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,16 +12,16 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.67",
-    "@graphcommerce/graphql": "^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/eslint-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/graphql": "^10.0.0-canary.72",
+    "@graphcommerce/next-ui": "^10.0.0-canary.72",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.72",
+    "@graphcommerce/react-hook-form": "^10.0.0-canary.72",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.72",
     "@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",