@graphcommerce/ecommerce-ui 8.0.6-canary.4 → 8.0.7

package/CHANGELOG.md

@@ -1,26 +1,8 @@
 # @graphcommerce/ecommerce-ui
 
-## 8.0.6-canary.4
+## 8.0.7
 
-## 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.6
 
 ## 8.0.5
 
@@ -56,14 +38,11 @@
 
 ### 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))
+- [#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))
+- [#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))
+- [#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.6
 
@@ -71,15 +50,13 @@
 
 ### 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))
+- [#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))
+- [#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
 
@@ -87,8 +64,7 @@
 
 ### 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))
+- [#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
 
@@ -120,19 +96,15 @@
 
 ### Minor Changes
 
-- [#2111](https://github.com/graphcommerce-org/graphcommerce/pull/2111) [`35f3d3e`](https://github.com/graphcommerce-org/graphcommerce/commit/35f3d3eaf46f4b782bb1149e0efb0ec3819442d6) - Only show network errors in development mode.
-  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+- [#2111](https://github.com/graphcommerce-org/graphcommerce/pull/2111) [`35f3d3e`](https://github.com/graphcommerce-org/graphcommerce/commit/35f3d3eaf46f4b782bb1149e0efb0ec3819442d6) - Only show network errors in development mode. ([@Jessevdpoel](https://github.com/Jessevdpoel))
 
-- [#2048](https://github.com/graphcommerce-org/graphcommerce/pull/2048) [`13e23e4`](https://github.com/graphcommerce-org/graphcommerce/commit/13e23e4265bac70fb4d0830e4661019e71ce299f) - Wishlist will now support configurable products and uses the `<ActionCardLayout/>`
-  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+- [#2048](https://github.com/graphcommerce-org/graphcommerce/pull/2048) [`13e23e4`](https://github.com/graphcommerce-org/graphcommerce/commit/13e23e4265bac70fb4d0830e4661019e71ce299f) - Wishlist will now support configurable products and uses the `<ActionCardLayout/>` ([@Jessevdpoel](https://github.com/Jessevdpoel))
 
-- [#2018](https://github.com/graphcommerce-org/graphcommerce/pull/2018) [`750aa6a`](https://github.com/graphcommerce-org/graphcommerce/commit/750aa6a72710869d54244467253212e551d335e0) - Changed the layout of the succes page. We are using ActionCards right now to match the design of the cart.
-  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+- [#2018](https://github.com/graphcommerce-org/graphcommerce/pull/2018) [`750aa6a`](https://github.com/graphcommerce-org/graphcommerce/commit/750aa6a72710869d54244467253212e551d335e0) - Changed the layout of the succes page. We are using ActionCards right now to match the design of the cart. ([@Jessevdpoel](https://github.com/Jessevdpoel))
 
 ### Patch Changes
 
-- [`e33660f`](https://github.com/graphcommerce-org/graphcommerce/commit/e33660f172466dcfa0ab7262cee612d9a3e47776) - Accessibility improvements for the frontend: Added skip content link. Removed empty buttons from tab flow. Gave focus to elements (such as the menu) that appear when after clicking a button. Improved aria labels where needed
-  ([@FrankHarland](https://github.com/FrankHarland))
+- [`e33660f`](https://github.com/graphcommerce-org/graphcommerce/commit/e33660f172466dcfa0ab7262cee612d9a3e47776) - Accessibility improvements for the frontend: Added skip content link. Removed empty buttons from tab flow. Gave focus to elements (such as the menu) that appear when after clicking a button. Improved aria labels where needed ([@FrankHarland](https://github.com/FrankHarland))
 
 ## 8.0.0-canary.100
 
@@ -184,8 +156,7 @@
 
 ### Patch Changes
 
-- [`e33660f`](https://github.com/graphcommerce-org/graphcommerce/commit/e33660f172466dcfa0ab7262cee612d9a3e47776) - a11y improvements (see https://github.com/graphcommerce-org/graphcommerce/issues/1995 for more info)
-  ([@FrankHarland](https://github.com/FrankHarland))
+- [`e33660f`](https://github.com/graphcommerce-org/graphcommerce/commit/e33660f172466dcfa0ab7262cee612d9a3e47776) - a11y improvements (see https://github.com/graphcommerce-org/graphcommerce/issues/1995 for more info) ([@FrankHarland](https://github.com/FrankHarland))
 
 ## 8.0.0-canary.76
 
@@ -1277,31 +1248,31 @@
   All occurences of `<Trans>` and `t` need to be replaced:
 
   ```tsx
-  import { Trans, t } from "@lingui/macro";
+  import { Trans, t } from '@lingui/macro'
 
   function MyComponent() {
-    const foo = "bar";
+    const foo = 'bar'
     return (
       <div aria-label={t`Account ${foo}`}>
         <Trans>My Translation {foo}</Trans>
       </div>
-    );
+    )
   }
   ```
 
   Needs to be replaced with:
 
   ```tsx
-  import { Trans } from "@lingui/react";
-  import { i18n } from "@lingui/core";
+  import { Trans } from '@lingui/react'
+  import { i18n } from '@lingui/core'
 
   function MyComponent() {
-    const foo = "bar";
+    const foo = 'bar'
     return (
       <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
-        <Trans key="My Translation {foo}" values={{ foo }}></Trans>
+        <Trans key='My Translation {foo}' values={{ foo }}></Trans>
       </div>
-    );
+    )
   }
   ```
 

package/components/FormComponents/NumberFieldElement.tsx

@@ -5,12 +5,7 @@ import {
   IconSvg,
   responsiveVal,
 } from '@graphcommerce/next-ui'
-import {
-  Controller,
-  ControllerProps,
-  FieldValues,
-  useController,
-} from '@graphcommerce/react-hook-form'
+import { Controller, ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { IconButtonProps, SxProps, Theme, TextField, TextFieldProps, Fab } from '@mui/material'
 
@@ -53,117 +48,117 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
     rules.required = i18n._(/* i18n */ 'This field is required')
   }
 
-  const {
-    field: { value, onChange, ref, ...field },
-    fieldState: { invalid, error },
-  } = useController({
-    name,
-    control,
-    rules,
-    defaultValue,
-  })
-
-  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)
-            }}
-            sx={{
-              boxShadow: variant === 'standard' ? 4 : 0,
-              minHeight: '30px',
-              minWidth: '30px',
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      defaultValue={defaultValue}
+      render={({ field: { value, onChange, ref, ...field }, fieldState: { invalid, error } }) => {
+        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)
             }}
-            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)
+            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)
+                  }}
+                  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'
-            {...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/SelectElement.tsx

@@ -1,10 +1,4 @@
-import { InputCheckmark } from '@graphcommerce/next-ui'
-import {
-  Controller,
-  ControllerProps,
-  FieldValues,
-  useController,
-} from '@graphcommerce/react-hook-form'
+import { Controller, ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { MenuItem, TextField, TextFieldProps } from '@mui/material'
 
@@ -19,7 +13,6 @@ export type SelectElementProps<T extends FieldValues, O extends OptionBase> = Om
   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>({
@@ -31,9 +24,6 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
   control,
   defaultValue,
   rules = validation ?? {},
-  showValid,
-  disabled,
-  shouldUnregister,
   ...rest
 }: SelectElementProps<TFieldValues, O>): JSX.Element {
   const isNativeSelect = !!rest.SelectProps?.native
@@ -43,56 +33,45 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
     rules.required = i18n._(/* i18n */ 'This field is required')
   }
 
-  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}
-      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
-          ),
+    <Controller
+      name={name}
+      rules={rules}
+      control={control}
+      defaultValue={defaultValue}
+      render={({ field: { onChange, value, ref, ...field }, fieldState: { invalid, error } }) => {
+        // handle shrink on number input fields
+        if (type === 'number' && typeof value !== 'undefined') {
+          rest.InputLabelProps = rest.InputLabelProps || {}
+          rest.InputLabelProps.shrink = true
+        }
+
+        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}
+          >
+            {isNativeSelect && <option />}
+            {options.map((item) => (
+              <ChildComponent key={item.id} value={item.id}>
+                {item.label}
+              </ChildComponent>
+            ))}
+          </TextField>
+        )
       }}
-    >
-      {isNativeSelect && <option />}
-      {options.map((item) => (
-        <ChildComponent key={item.id} value={item.id}>
-          {item.label}
-        </ChildComponent>
-      ))}
-    </TextField>
+    />
   )
 }

package/components/FormComponents/TextFieldElement.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import { InputCheckmark } from '@graphcommerce/next-ui'
-import { FieldValues, UseControllerProps, useController } from '@graphcommerce/react-hook-form'
+import { Controller, FieldValues, UseControllerProps } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { TextField, TextFieldProps } from '@mui/material'
 
@@ -10,8 +9,6 @@ export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<
 > & {
   /** @deprecated Please use the rules props instead */
   validation?: UseControllerProps<T>['rules']
-
-  showValid?: boolean
 } & UseControllerProps<T>
 
 export function TextFieldElement<TFieldValues extends FieldValues>({
@@ -22,7 +19,6 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
   control,
   defaultValue,
   rules = validation,
-  showValid,
   ...rest
 }: TextFieldElementProps<TFieldValues>): JSX.Element {
   if (required && !rules.required) {
@@ -38,34 +34,29 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
     }
   }
 
-  const {
-    field: { onChange, ref, value = '', ...field },
-    fieldState: { error },
-  } = useController({ name, control, rules, defaultValue })
-
   return (
-    <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
-          ),
-      }}
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      defaultValue={defaultValue}
+      render={({ field: { onChange, ref, ...field }, fieldState: { error } }) => (
+        <TextField
+          {...rest}
+          {...field}
+          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}
+        />
+      )}
     />
   )
 }

package/components/WaitForQueries/WaitForQueries.tsx

@@ -1,12 +1,9 @@
+import { useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
 import { QueryResult } from '@graphcommerce/graphql'
-import { useIsSSR } from '@graphcommerce/next-ui'
-import React from 'react'
+import React, { startTransition, useEffect, useState } 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
@@ -14,9 +11,14 @@ export type WaitForQueriesProps = {
 
 /** Shows the fallback during: SSR, Hydration and Query Loading. */
 export const WaitForQueries = (props: WaitForQueriesProps) => {
-  const { waitFor, fallback, children } = props
+  const { waitFor, fallback, children, noSsr = true } = props
 
-  const mounted = !useIsSSR()
+  // 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])
 
   // 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.0.6-canary.4",
+  "version": "8.0.7",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,12 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.4",
-    "@graphcommerce/graphql": "^8.0.6-canary.4",
-    "@graphcommerce/next-ui": "^8.0.6-canary.4",
-    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.4",
-    "@graphcommerce/react-hook-form": "^8.0.6-canary.4",
-    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.4",
+    "@graphcommerce/eslint-config-pwa": "^8.0.7",
+    "@graphcommerce/graphql": "^8.0.7",
+    "@graphcommerce/next-ui": "^8.0.7",
+    "@graphcommerce/prettier-config-pwa": "^8.0.7",
+    "@graphcommerce/react-hook-form": "^8.0.7",
+    "@graphcommerce/typescript-config-pwa": "^8.0.7",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",