@graphcommerce/ecommerce-ui 10.0.0-canary.66 → 10.0.0-canary.68

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @graphcommerce/ecommerce-ui
 
+## 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
 
 ### Patch Changes

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/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.66",
+  "version": "10.0.0-canary.68",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,16 +12,16 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.66",
-    "@graphcommerce/graphql": "^10.0.0-canary.66",
-    "@graphcommerce/next-ui": "^10.0.0-canary.66",
-    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.66",
-    "@graphcommerce/react-hook-form": "^10.0.0-canary.66",
-    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.66",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
+    "@graphcommerce/graphql": "^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",