@graphcommerce/ecommerce-ui 8.1.0-canary.3 → 8.1.0-canary.6

package/CHANGELOG.md

@@ -1,13 +1,98 @@
 # @graphcommerce/ecommerce-ui
 
-## 8.1.0-canary.3
+## 8.1.0-canary.6
+
+## 8.1.0-canary.5
+
+## 8.0.6-canary.4
+
+## 8.0.6-canary.3
+
+## 8.0.6-canary.2
+
+### Patch Changes
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use muiRegister, which improves INP scores
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Make sure the TextFieldElement doesn’t give a uncontrolled to controlled warning.
+  Convert SelectElement to useController instead of a separate Controller component.
+  Make sure the original endAdornment is always shown only until the value is valid ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`d4e693d`](https://github.com/graphcommerce-org/graphcommerce/commit/d4e693d553198c9a1ef398d000ca23d209e6c2ba) - The `<WaitForQueries/>` component now uses the useIsSSR hook which prevents loading spinners when navigating on the client, which make all account/cart/checkout pages faster.
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.0.6-canary.1
+
+## 8.0.6-canary.0
+
+## 8.0.5
+
+## 8.0.5-canary.10
+
+## 8.0.5-canary.9
+
+## 8.0.5-canary.8
+
+## 8.0.5-canary.7
+
+## 8.0.5-canary.6
+
+## 8.0.5-canary.5
+
+## 8.0.5-canary.4
+
+## 8.0.5-canary.3
+
+## 8.0.5-canary.2
+
+## 8.0.5-canary.1
+
+## 8.0.5-canary.0
+
+## 8.0.4
+
+## 8.0.4-canary.1
+
+## 8.0.4-canary.0
+
+## 8.0.3
 
 ### Patch Changes
 
+- [#2212](https://github.com/graphcommerce-org/graphcommerce/pull/2212) [`e12d1dc`](https://github.com/graphcommerce-org/graphcommerce/commit/e12d1dc201bf7b23a996bd58a256a117b91a9334) - Rename validation to rules for all Form field components and deprecate validation
+  ([@paales](https://github.com/paales))
+
+- [#2203](https://github.com/graphcommerce-org/graphcommerce/pull/2203) [`7ef7dc7`](https://github.com/graphcommerce-org/graphcommerce/commit/7ef7dc7631f61a2feba67a531a210df9c22fed4b) - CheckboxElement, MultiSelectElement, NumberFieldElement, SelectElement, SliderElement and TextFieldElement have their inputRef passed, allowing focus to be set by the form.
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
 - [#2205](https://github.com/graphcommerce-org/graphcommerce/pull/2205) [`eb14696`](https://github.com/graphcommerce-org/graphcommerce/commit/eb14696fc65e084a06790c88a8218fb3003f7c2c) - `<WaitForQueries/>` will default to loading, restoring the previous behavior. This might introduce , this might introduce an additional spinner but prevents a flash where it is shown that there is no cart
   ([@paales](https://github.com/paales))
 
-## 8.1.0-canary.2
+## 8.0.3-canary.6
+
+## 8.0.3-canary.5
+
+### Patch Changes
+
+- [#2212](https://github.com/graphcommerce-org/graphcommerce/pull/2212) [`e12d1dc`](https://github.com/graphcommerce-org/graphcommerce/commit/e12d1dc201bf7b23a996bd58a256a117b91a9334) - Rename validation to rules for all Form field components and deprecate validation
+  ([@paales](https://github.com/paales))
+
+## 8.0.3-canary.4
+
+### Patch Changes
+
+- [#2203](https://github.com/graphcommerce-org/graphcommerce/pull/2203) [`7ef7dc7`](https://github.com/graphcommerce-org/graphcommerce/commit/7ef7dc7631f61a2feba67a531a210df9c22fed4b) - CheckboxElement, MultiSelectElement, NumberFieldElement, SelectElement, SliderElement and TextFieldElement have their inputRef passed, allowing focus to be set by the form.
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 8.0.3-canary.3
+
+## 8.0.3-canary.2
+
+### Patch Changes
+
+- [#2205](https://github.com/graphcommerce-org/graphcommerce/pull/2205) [`eb14696`](https://github.com/graphcommerce-org/graphcommerce/commit/eb14696fc65e084a06790c88a8218fb3003f7c2c) - `<WaitForQueries/>` will default to loading, restoring the previous behavior. This might introduce , this might introduce an additional spinner but prevents a flash where it is shown that there is no cart
+  ([@paales](https://github.com/paales))
 
 ## 8.0.3-canary.1
 

package/components/FormComponents/CheckboxButtonGroup.tsx

@@ -21,6 +21,7 @@ export type CheckboxButtonGroupProps<T extends FieldValues> = {
   options: { id: string | number; label: string }[] | any[]
   helperText?: string
   required?: boolean
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   label?: string
   labelKey?: string

package/components/FormComponents/CheckboxElement.tsx

@@ -19,6 +19,7 @@ import {
 } from '@mui/material'
 
 export type CheckboxElementProps<T extends FieldValues> = Omit<CheckboxProps, 'name'> & {
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   label?: FormControlLabelProps['label']
   helperText?: string
@@ -47,7 +48,8 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
       name={name}
       rules={rules}
       control={control}
-      render={({ field: { value, onChange }, fieldState: { invalid, error } }) => {
+      render={({ field: { value, onChange, ref, ...field }, fieldState: { invalid, error } }) => {
+        // eslint-disable-next-line no-nested-ternary
         const parsedHelperText = error
           ? typeof parseError === 'function'
             ? parseError(error)
@@ -61,6 +63,8 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
                 control={
                   <Checkbox
                     {...rest}
+                    {...field}
+                    inputRef={ref}
                     color={rest.color || 'primary'}
                     sx={{
                       ...(Array.isArray(sx) ? sx : [sx]),
@@ -68,9 +72,7 @@ export function CheckboxElement<TFieldValues extends FieldValues>({
                     }}
                     value={value}
                     checked={!!value}
-                    onChange={() => {
-                      onChange(!value)
-                    }}
+                    onChange={() => onChange(!value)}
                   />
                 }
               />

package/components/FormComponents/MultiSelectElement.tsx

@@ -27,6 +27,7 @@ export type MultiSelectElementProps<T extends FieldValues> = Omit<SelectProps, '
   itemValue?: string
   itemLabel?: string
   required?: boolean
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   minWidth?: number
   menuMaxHeight?: number
@@ -72,7 +73,7 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
       name={name}
       rules={rules}
       control={control}
-      render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => {
+      render={({ field: { value, onChange, ...field }, fieldState: { invalid, error } }) => {
         helperText = error
           ? typeof parseError === 'function'
             ? parseError(error)
@@ -102,6 +103,7 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
             )}
             <Select
               {...rest}
+              {...field}
               id={rest.id || `select-multi-select-${name}`}
               multiple
               label={label || undefined}
@@ -109,7 +111,6 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
               value={value || []}
               required={required}
               onChange={onChange}
-              onBlur={onBlur}
               MenuProps={{
                 ...rest.MenuProps,
                 PaperProps: {
@@ -126,23 +127,23 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
                 typeof rest.renderValue === 'function'
                   ? rest.renderValue
                   : showChips
-                  ? (selected) => (
-                      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-                        {((selected as any[]) || []).map((selectedValue) => (
-                          <Chip
-                            key={selectedValue}
-                            label={selectedValue}
-                            style={{ display: 'flex', flexWrap: 'wrap' }}
-                            onDelete={() => {
-                              onChange(value.filter((i: any) => i !== selectedValue))
-                              // setValue(name, formValue.filter((i: any) => i !== value), { shouldValidate: true })
-                            }}
-                            deleteIcon={<IconSvg src={iconClose} />}
-                          />
-                        ))}
-                      </div>
-                    )
-                  : (selected) => (Array.isArray(selected) ? selected.join(', ') : '')
+                    ? (selected) => (
+                        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+                          {((selected as any[]) || []).map((selectedValue) => (
+                            <Chip
+                              key={selectedValue}
+                              label={selectedValue}
+                              style={{ display: 'flex', flexWrap: 'wrap' }}
+                              onDelete={() => {
+                                onChange(value.filter((i: any) => i !== selectedValue))
+                                // setValue(name, formValue.filter((i: any) => i !== value), { shouldValidate: true })
+                              }}
+                              deleteIcon={<IconSvg src={iconClose} />}
+                            />
+                          ))}
+                        </div>
+                      )
+                    : (selected) => (Array.isArray(selected) ? selected.join(', ') : '')
               }
             >
               {options.map((item) => {

package/components/FormComponents/NumberFieldElement.tsx

@@ -5,7 +5,12 @@ import {
   IconSvg,
   responsiveVal,
 } from '@graphcommerce/next-ui'
-import { Controller, ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import {
+  Controller,
+  ControllerProps,
+  FieldValues,
+  useController,
+} from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { IconButtonProps, SxProps, Theme, TextField, TextFieldProps, Fab } from '@mui/material'
 
@@ -48,117 +53,117 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
     rules.required = i18n._(/* i18n */ 'This field is required')
   }
 
-  return (
-    <Controller
-      name={name}
-      control={control}
-      rules={rules}
-      defaultValue={defaultValue}
-      render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => {
-        const valueAsNumber = value ? parseFloat(value) : 0
+  const {
+    field: { value, onChange, ref, ...field },
+    fieldState: { invalid, error },
+  } = useController({
+    name,
+    control,
+    rules,
+    defaultValue,
+  })
 
-        return (
-          <TextField
-            {...textFieldProps}
-            variant={variant}
-            name={name}
-            value={value ?? ''}
-            onChange={(ev) => {
-              const newValue = (ev.target as HTMLInputElement).valueAsNumber
-              onChange(Number.isNaN(newValue) ? '' : newValue)
-              textFieldProps.onChange?.(ev)
+  const valueAsNumber = value ? parseFloat(value) : 0
+
+  return (
+    <TextField
+      {...textFieldProps}
+      {...field}
+      inputRef={ref}
+      value={value ?? ''}
+      onChange={(ev) => {
+        const newValue = (ev.target as HTMLInputElement).valueAsNumber
+        onChange(Number.isNaN(newValue) ? '' : newValue)
+        textFieldProps.onChange?.(ev)
+      }}
+      variant={variant}
+      required={required}
+      error={invalid}
+      helperText={error ? error.message : textFieldProps.helperText}
+      size={size}
+      type='number'
+      className={`${textFieldProps.className ?? ''} ${classes.quantity}`}
+      sx={[
+        {
+          width: responsiveVal(90, 120),
+        },
+        {
+          '& input[type=number]': {
+            MozAppearance: 'textfield',
+          },
+          '& .MuiOutlinedInput-root': {
+            px: '2px',
+            display: 'grid',
+            gridTemplateColumns: '1fr auto 1fr',
+          },
+        },
+        variant === 'standard' && {
+          '& .MuiOutlinedInput-input': {
+            padding: 0,
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            display: 'none',
+          },
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      autoComplete='off'
+      InputProps={{
+        ...textFieldProps.InputProps,
+        startAdornment: (
+          <Fab
+            aria-label={i18n._(/* i18n */ 'Decrease')}
+            size='smaller'
+            onClick={() => {
+              if ((valueAsNumber || Infinity) <= inputProps.min) return
+              onChange(value - 1)
             }}
-            onBlur={onBlur}
-            required={required}
-            error={invalid}
-            helperText={error ? error.message : textFieldProps.helperText}
-            size={size}
-            type='number'
-            className={`${textFieldProps.className ?? ''} ${classes.quantity}`}
-            sx={[
-              {
-                width: responsiveVal(90, 120),
-              },
-              {
-                '& input[type=number]': {
-                  MozAppearance: 'textfield',
-                },
-                '& .MuiOutlinedInput-root': {
-                  px: '2px',
-                  display: 'grid',
-                  gridTemplateColumns: '1fr auto 1fr',
-                },
-              },
-              variant === 'standard' && {
-                '& .MuiOutlinedInput-input': {
-                  padding: 0,
-                },
-                '& .MuiOutlinedInput-notchedOutline': {
-                  display: 'none',
-                },
-              },
-              ...(Array.isArray(sx) ? sx : [sx]),
-            ]}
-            autoComplete='off'
-            InputProps={{
-              ...textFieldProps.InputProps,
-              startAdornment: (
-                <Fab
-                  aria-label={i18n._(/* i18n */ 'Decrease')}
-                  size='smaller'
-                  onClick={() => {
-                    if ((valueAsNumber || Infinity) <= inputProps.min) return
-                    onChange(value - 1)
-                  }}
-                  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={i18n._(/* i18n */ 'Increase')}
-                  size='smaller'
-                  onClick={() => {
-                    if (valueAsNumber >= (inputProps.max ?? Infinity)) return
-                    onChange(valueAsNumber + 1)
-                  }}
-                  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>
-              ),
+            sx={{
+              boxShadow: variant === 'standard' ? 4 : 0,
+              minHeight: '30px',
+              minWidth: '30px',
             }}
-            inputProps={{
-              'aria-label': i18n._(/* i18n */ 'Number'),
-              ...inputProps,
-              className: `${inputProps?.className ?? ''} ${classes.quantityInput}`,
-              sx: {
-                typography: 'body1',
-                textAlign: 'center',
-                '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
-                  appearance: 'none',
-                },
-              },
+            tabIndex={-1}
+            color='inherit'
+            {...DownProps}
+            className={`${classes.button} ${DownProps.className ?? ''}`}
+          >
+            {DownProps.children ?? <IconSvg src={iconMin} size='small' />}
+          </Fab>
+        ),
+        endAdornment: (
+          <Fab
+            aria-label={i18n._(/* i18n */ 'Increase')}
+            size='smaller'
+            onClick={() => {
+              if (valueAsNumber >= (inputProps.max ?? Infinity)) return
+              onChange(valueAsNumber + 1)
             }}
-          />
-        )
+            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': i18n._(/* i18n */ '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/PasswordRepeatElement.tsx

@@ -14,7 +14,7 @@ export function PasswordRepeatElement<TFieldValues extends FieldValues>({
   return (
     <PasswordElement
       {...rest}
-      validation={{
+      rules={{
         validate: (value: string) =>
           value === pwValue || i18n._(/* i18n */ "Passwords don't match"),
       }}

package/components/FormComponents/RadioButtonGroup.tsx

@@ -20,6 +20,7 @@ export type RadioButtonGroupProps<T extends FieldValues> = {
   options: { label: string; id: string | number }[] | any[]
   helperText?: string
   required?: boolean
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   label?: string
   labelKey?: string

package/components/FormComponents/SelectElement.tsx

@@ -1,4 +1,10 @@
-import { Controller, ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import { InputCheckmark } from '@graphcommerce/next-ui'
+import {
+  Controller,
+  ControllerProps,
+  FieldValues,
+  useController,
+} from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { MenuItem, TextField, TextFieldProps } from '@mui/material'
 
@@ -8,10 +14,12 @@ export type SelectElementProps<T extends FieldValues, O extends OptionBase> = Om
   TextFieldProps,
   'name' | 'type' | 'onChange' | 'defaultValue'
 > & {
+  /** @deprecated Please use the rules props instead */
   validation?: ControllerProps<T>['rules']
   options?: O[]
   type?: 'string' | 'number'
   onChange?: (value: string | number) => void
+  showValid?: boolean
 } & Omit<ControllerProps<T>, 'render'>
 
 export function SelectElement<TFieldValues extends FieldValues, O extends OptionBase>({
@@ -19,57 +27,72 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
   required,
   options = [],
   type,
-  validation = {},
+  validation,
   control,
   defaultValue,
+  rules = validation ?? {},
+  showValid,
+  disabled,
+  shouldUnregister,
   ...rest
 }: SelectElementProps<TFieldValues, O>): JSX.Element {
   const isNativeSelect = !!rest.SelectProps?.native
   const ChildComponent = isNativeSelect ? 'option' : MenuItem
 
-  if (required && !validation.required) {
-    validation.required = i18n._(/* i18n */ 'This field is required')
+  if (required && !rules.required) {
+    rules.required = i18n._(/* i18n */ 'This field is required')
   }
 
-  return (
-    <Controller
-      name={name}
-      rules={validation}
-      control={control}
-      defaultValue={defaultValue}
-      render={({ field: { onBlur, onChange, value }, fieldState: { invalid, error } }) => {
-        // handle shrink on number input fields
-        if (type === 'number' && typeof value !== 'undefined') {
-          rest.InputLabelProps = rest.InputLabelProps || {}
-          rest.InputLabelProps.shrink = true
-        }
+  const {
+    field: { onChange, value, ref, ...field },
+    fieldState: { invalid, error },
+  } = useController({
+    name,
+    rules,
+    control,
+    defaultValue,
+    disabled,
+    shouldUnregister,
+  })
+
+  // handle shrink on number input fields
+  if (type === 'number' && typeof value !== 'undefined') {
+    rest.InputLabelProps = rest.InputLabelProps || {}
+    rest.InputLabelProps.shrink = true
+  }
 
-        return (
-          <TextField
-            {...rest}
-            name={name}
-            value={value ?? ''}
-            onBlur={onBlur}
-            onChange={(event) => {
-              let item: number | string | O | undefined = event.target.value
-              if (type === 'number') item = Number(item)
-              rest.onChange?.(item)
-              onChange(item)
-            }}
-            select
-            required={required}
-            error={invalid}
-            helperText={error ? error.message : rest.helperText}
-          >
-            {isNativeSelect && <option />}
-            {options.map((item) => (
-              <ChildComponent key={item.id} value={item.id}>
-                {item.label}
-              </ChildComponent>
-            ))}
-          </TextField>
-        )
+  return (
+    <TextField
+      {...rest}
+      value={value ?? ''}
+      {...field}
+      inputRef={ref}
+      onChange={(event) => {
+        let item: number | string | O | undefined = event.target.value
+        if (type === 'number') item = Number(item)
+        rest.onChange?.(item)
+        onChange(item)
+      }}
+      select
+      required={required}
+      error={invalid}
+      helperText={error ? error.message : rest.helperText}
+      InputProps={{
+        ...rest.InputProps,
+        endAdornment:
+          showValid && value && !error ? (
+            <InputCheckmark show={!error} />
+          ) : (
+            rest.InputProps?.endAdornment
+          ),
       }}
-    />
+    >
+      {isNativeSelect && <option />}
+      {options.map((item) => (
+        <ChildComponent key={item.id} value={item.id}>
+          {item.label}
+        </ChildComponent>
+      ))}
+    </TextField>
   )
 }

package/components/FormComponents/SliderElement.tsx

@@ -16,6 +16,7 @@ import {
 
 export type SliderElementProps<T extends FieldValues> = Omit<SliderProps, 'control'> & {
   label?: string
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   required?: boolean
   formControlProps?: FormControlProps
@@ -39,7 +40,7 @@ export function SliderElement<TFieldValues extends FieldValues>({
       name={name}
       control={control}
       rules={rules}
-      render={({ field: { onChange, value }, fieldState: { invalid, error } }) => {
+      render={({ field, fieldState: { invalid, error } }) => {
         const parsedHelperText = error
           ? typeof parseError === 'function'
             ? parseError(error)
@@ -52,12 +53,7 @@ export function SliderElement<TFieldValues extends FieldValues>({
                 {label}
               </FormLabel>
             )}
-            <Slider
-              {...other}
-              value={value}
-              onChange={onChange}
-              valueLabelDisplay={other.valueLabelDisplay || 'auto'}
-            />
+            <Slider {...other} {...field} valueLabelDisplay={other.valueLabelDisplay || 'auto'} />
             {parsedHelperText && (
               <FormHelperText error={invalid}>{parsedHelperText}</FormHelperText>
             )}

package/components/FormComponents/TextFieldElement.tsx

@@ -1,10 +1,6 @@
 /* eslint-disable no-nested-ternary */
-import {
-  Controller,
-  FieldError,
-  FieldValues,
-  UseControllerProps,
-} from '@graphcommerce/react-hook-form'
+import { InputCheckmark } from '@graphcommerce/next-ui'
+import { FieldValues, UseControllerProps, useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { TextField, TextFieldProps } from '@mui/material'
 
@@ -12,8 +8,11 @@ export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<
   TextFieldProps,
   'name' | 'defaultValue'
 > & {
+  /** @deprecated Please use the rules props instead */
   validation?: UseControllerProps<T>['rules']
-} & Omit<UseControllerProps<T>, 'rules'>
+
+  showValid?: boolean
+} & UseControllerProps<T>
 
 export function TextFieldElement<TFieldValues extends FieldValues>({
   validation = {},
@@ -22,14 +21,16 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
   name,
   control,
   defaultValue,
+  rules = validation,
+  showValid,
   ...rest
 }: TextFieldElementProps<TFieldValues>): JSX.Element {
-  if (required && !validation.required) {
-    validation.required = i18n._(/* i18n */ 'This field is required')
+  if (required && !rules.required) {
+    rules.required = i18n._(/* i18n */ 'This field is required')
   }
 
-  if (type === 'email' && !validation.pattern) {
-    validation.pattern = {
+  if (type === 'email' && !rules.pattern) {
+    rules.pattern = {
       // eslint-disable-next-line no-useless-escape
       value:
         /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
@@ -37,31 +38,34 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
     }
   }
 
+  const {
+    field: { onChange, ref, value = '', ...field },
+    fieldState: { error },
+  } = useController({ name, control, rules, defaultValue })
+
   return (
-    <Controller
-      name={name}
-      control={control}
-      rules={validation}
-      defaultValue={defaultValue}
-      render={({ field: { value, onChange, onBlur, ref }, fieldState: { error } }) => (
-        <TextField
-          {...rest}
-          name={name}
-          value={value ?? ''}
-          onChange={(ev) => {
-            onChange(
-              type === 'number' && ev.target.value ? Number(ev.target.value) : ev.target.value,
-            )
-            rest.onChange?.(ev)
-          }}
-          onBlur={onBlur}
-          required={required}
-          type={type}
-          error={Boolean(error) || rest.error}
-          helperText={error ? error.message : rest.helperText}
-          inputRef={ref}
-        />
-      )}
+    <TextField
+      {...rest}
+      {...field}
+      value={value}
+      onChange={(ev) => {
+        onChange(type === 'number' && ev.target.value ? Number(ev.target.value) : ev.target.value)
+        rest.onChange?.(ev)
+      }}
+      inputRef={ref}
+      required={required}
+      type={type}
+      error={Boolean(error) || rest.error}
+      helperText={error ? error.message : rest.helperText}
+      InputProps={{
+        ...rest.InputProps,
+        endAdornment:
+          showValid && value && !error ? (
+            <InputCheckmark show={!error} />
+          ) : (
+            rest.InputProps?.endAdornment
+          ),
+      }}
     />
   )
 }

package/components/FormComponents/ToggleButtonGroup.tsx

@@ -25,6 +25,7 @@ type SingleToggleButtonProps = Omit<ToggleButtonProps, 'value' | 'children'> & {
 export type ToggleButtonGroupElementProps<T extends FieldValues> = ToggleButtonGroupProps & {
   required?: boolean
   label?: string
+  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
   parseError?: (error: FieldError) => string
   options: SingleToggleButtonProps[]
   formLabelProps?: FormLabelProps

package/components/WaitForQueries/WaitForQueries.tsx

@@ -1,9 +1,12 @@
-import { useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
 import { QueryResult } from '@graphcommerce/graphql'
-import React, { startTransition, useEffect, useState } from 'react'
+import { useIsSSR } from '@graphcommerce/next-ui'
+import React from 'react'
 
 export type WaitForQueriesProps = {
   waitFor: QueryResult<any, any> | boolean | (QueryResult<any, any> | boolean)[] | undefined
+  /**
+   * @deprecated Will be automatically correct.
+   */
   noSsr?: boolean
   children: React.ReactNode
   fallback?: React.ReactNode
@@ -11,14 +14,9 @@ export type WaitForQueriesProps = {
 
 /** Shows the fallback during: SSR, Hydration and Query Loading. */
 export const WaitForQueries = (props: WaitForQueriesProps) => {
-  const { waitFor, fallback, children, noSsr = true } = props
+  const { waitFor, fallback, children } = props
 
-  // Make sure the first render is always the same as the server.
-  // Make sure we we use startTransition to make sure we don't get into trouble with Suspense.
-  const [mounted, setMounted] = useState(!noSsr)
-  useEffect(() => {
-    if (noSsr) setMounted(true)
-  }, [noSsr])
+  const mounted = !useIsSSR()
 
   // We are done when all queries either have data or an error.
   const isDone = (Array.isArray(waitFor) ? waitFor : [waitFor]).every((res) => {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.3",
+  "version": "8.1.0-canary.6",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,12 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.3",
-    "@graphcommerce/graphql": "^8.1.0-canary.3",
-    "@graphcommerce/next-ui": "^8.1.0-canary.3",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.3",
-    "@graphcommerce/react-hook-form": "^8.1.0-canary.3",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.3",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.6",
+    "@graphcommerce/graphql": "^8.1.0-canary.6",
+    "@graphcommerce/next-ui": "^8.1.0-canary.6",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.6",
+    "@graphcommerce/react-hook-form": "^8.1.0-canary.6",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.6",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",