@graphcommerce/ecommerce-ui 8.0.6-canary.1 → 8.0.6-canary.2

package/CHANGELOG.md

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

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, ref, ...field }, 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}
-            {...field}
-            inputRef={ref}
-            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)
             }}
-            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'
+            {...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/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'
 
@@ -13,6 +19,7 @@ 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>({
@@ -24,6 +31,9 @@ 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
@@ -33,45 +43,56 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
     rules.required = i18n._(/* i18n */ 'This field is required')
   }
 
-  return (
-    <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
-        }
+  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}
-          >
-            {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/TextFieldElement.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable no-nested-ternary */
-import { Controller, 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'
 
@@ -9,6 +10,8 @@ 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>({
@@ -19,6 +22,7 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
   control,
   defaultValue,
   rules = validation,
+  showValid,
   ...rest
 }: TextFieldElementProps<TFieldValues>): JSX.Element {
   if (required && !rules.required) {
@@ -34,29 +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={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}
-        />
-      )}
+    <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/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.0.6-canary.1",
+  "version": "8.0.6-canary.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,12 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.1",
-    "@graphcommerce/graphql": "^8.0.6-canary.1",
-    "@graphcommerce/next-ui": "^8.0.6-canary.1",
-    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.1",
-    "@graphcommerce/react-hook-form": "^8.0.6-canary.1",
-    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.1",
+    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.2",
+    "@graphcommerce/graphql": "^8.0.6-canary.2",
+    "@graphcommerce/next-ui": "^8.0.6-canary.2",
+    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.2",
+    "@graphcommerce/react-hook-form": "^8.0.6-canary.2",
+    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.2",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",