@graphcommerce/ecommerce-ui 8.1.0-canary.9 → 9.0.0-canary.101

package/components/FormComponents/MultiSelectElement.tsx

@@ -1,11 +1,6 @@
 /* eslint-disable no-nested-ternary */
 import { IconSvg, iconClose } from '@graphcommerce/next-ui'
-import {
-  Controller,
-  FieldError,
-  FieldValues,
-  ControllerProps,
-} from '@graphcommerce/react-hook-form'
+import { FieldValues, ControllerProps, useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import {
   Checkbox,
@@ -27,8 +22,6 @@ 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
   menuMaxWidth?: number
@@ -44,7 +37,7 @@ const ITEM_PADDING_TOP = 8
 export function MultiSelectElement<TFieldValues extends FieldValues>(
   props: MultiSelectElementProps<TFieldValues>,
 ): JSX.Element {
-  let {
+  const {
     options,
     label = '',
     itemKey = 'id',
@@ -52,7 +45,6 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
     itemLabel = 'label',
     required = false,
     rules = {},
-    parseError,
     name,
     menuMaxHeight = ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
     menuMaxWidth = 250,
@@ -62,114 +54,115 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
     control,
     showCheckbox,
     formControlProps,
+    shouldUnregister,
+    defaultValue,
+    disabled,
     ...rest
   } = props
   if (required && !rules.required) {
     rules.required = i18n._(/* i18n */ 'This field is required')
   }
 
+  const {
+    field: { value, onChange, ...field },
+    fieldState: { invalid, error },
+  } = useController({
+    name,
+    rules,
+    control,
+    defaultValue,
+    disabled,
+    shouldUnregister,
+  })
+
+  const parsedHelperText = error ? error.message : helperText
+
   return (
-    <Controller
-      name={name}
-      rules={rules}
-      control={control}
-      render={({ field: { value, onChange, ...field }, fieldState: { invalid, error } }) => {
-        helperText = error
-          ? typeof parseError === 'function'
-            ? parseError(error)
-            : error.message
-          : helperText
-        return (
-          <FormControl
-            {...formControlProps}
-            style={{
-              ...formControlProps?.style,
-              minWidth,
-            }}
-            variant={rest.variant}
-            fullWidth={rest.fullWidth}
-            error={invalid}
-            size={rest.size}
-          >
-            {label && (
-              <InputLabel
-                size={rest.size === 'small' ? 'small' : undefined}
-                error={invalid}
-                htmlFor={rest.id || `select-multi-select-${name}`}
-                required={required}
-              >
-                {label}
-              </InputLabel>
-            )}
-            <Select
-              {...rest}
-              {...field}
-              id={rest.id || `select-multi-select-${name}`}
-              multiple
-              label={label || undefined}
-              error={invalid}
-              value={value || []}
-              required={required}
-              onChange={onChange}
-              MenuProps={{
-                ...rest.MenuProps,
-                PaperProps: {
-                  ...(rest.MenuProps?.PaperProps ?? {
-                    style: {
-                      maxHeight: menuMaxHeight,
-                      width: menuMaxWidth,
-                      ...rest.MenuProps?.PaperProps?.style,
-                    },
-                  }),
-                },
+    <FormControl
+      {...formControlProps}
+      style={{
+        ...formControlProps?.style,
+        minWidth,
+      }}
+      variant={rest.variant}
+      fullWidth={rest.fullWidth}
+      error={invalid}
+      size={rest.size}
+    >
+      {label && (
+        <InputLabel
+          size={rest.size === 'small' ? 'small' : undefined}
+          error={invalid}
+          htmlFor={rest.id || `select-multi-select-${name}`}
+          required={required}
+        >
+          {label}
+        </InputLabel>
+      )}
+      <Select
+        {...rest}
+        {...field}
+        id={rest.id || `select-multi-select-${name}`}
+        multiple
+        label={label || undefined}
+        error={invalid}
+        value={value || []}
+        required={required}
+        onChange={onChange}
+        MenuProps={{
+          ...rest.MenuProps,
+          PaperProps: {
+            ...(rest.MenuProps?.PaperProps ?? {
+              style: {
+                maxHeight: menuMaxHeight,
+                width: menuMaxWidth,
+                ...rest.MenuProps?.PaperProps?.style,
+              },
+            }),
+          },
+        }}
+        renderValue={
+          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(', ') : '')
+        }
+      >
+        {options.map((item) => {
+          const val: string | number = item[itemValue || itemKey] || item
+          const isChecked = Array.isArray(value) ? value.includes(val) : false
+          return (
+            <MenuItem
+              key={val}
+              value={val}
+              sx={{
+                fontWeight: (theme) =>
+                  isChecked ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,
               }}
-              renderValue={
-                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(', ') : '')
-              }
             >
-              {options.map((item) => {
-                const val: string | number = item[itemValue || itemKey] || item
-                const isChecked = Array.isArray(value) ? value.includes(val) : false
-                return (
-                  <MenuItem
-                    key={val}
-                    value={val}
-                    sx={{
-                      fontWeight: (theme) =>
-                        isChecked
-                          ? theme.typography.fontWeightBold
-                          : theme.typography.fontWeightRegular,
-                    }}
-                  >
-                    {showCheckbox && <Checkbox checked={isChecked} />}
-                    <ListItemText primary={item[itemLabel] || item} />
-                  </MenuItem>
-                )
-              })}
-            </Select>
-            {helperText && <FormHelperText>{helperText}</FormHelperText>}
-          </FormControl>
-        )
-      }}
-    />
+              {showCheckbox && <Checkbox checked={isChecked} />}
+              <ListItemText primary={item[itemLabel] || item} />
+            </MenuItem>
+          )
+        })}
+      </Select>
+      {parsedHelperText && <FormHelperText>{parsedHelperText}</FormHelperText>}
+    </FormControl>
   )
 }

package/components/FormComponents/NumberFieldElement.tsx

@@ -44,6 +44,8 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
     required,
     defaultValue,
     variant = 'outlined',
+    disabled,
+    shouldUnregister,
     ...textFieldProps
   } = props
 
@@ -61,6 +63,8 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
     control,
     rules,
     defaultValue,
+    disabled,
+    shouldUnregister,
   })
 
   const valueAsNumber = value ? parseFloat(value) : 0
@@ -115,7 +119,11 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
             aria-label={i18n._(/* i18n */ 'Decrease')}
             size='smaller'
             onClick={() => {
-              if ((valueAsNumber || Infinity) <= inputProps.min) return
+              if (
+                (valueAsNumber ?? Infinity) <= inputProps.min ||
+                (inputProps.min === 0 && valueAsNumber <= inputProps.min)
+              )
+                return
               onChange(value - 1)
             }}
             sx={{

package/components/FormComponents/RadioButtonGroup.tsx

@@ -1,9 +1,4 @@
-import {
-  FieldError,
-  useController,
-  FieldValues,
-  UseControllerProps,
-} from '@graphcommerce/react-hook-form'
+import { useController, FieldValues, UseControllerProps } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import {
   FormControl,
@@ -20,8 +15,6 @@ 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
   valueKey?: string
@@ -32,21 +25,27 @@ export type RadioButtonGroupProps<T extends FieldValues> = {
   row?: boolean
 } & UseControllerProps<T>
 
-export function RadioButtonGroup<TFieldValues extends FieldValues>({
-  helperText,
-  options,
-  label,
-  name,
-  parseError,
-  labelKey = 'label',
-  valueKey = 'id',
-  required,
-  emptyOptionLabel,
-  returnObject,
-  row,
-  control,
-  ...rest
-}: RadioButtonGroupProps<TFieldValues>): JSX.Element {
+export function RadioButtonGroup<TFieldValues extends FieldValues>(
+  props: RadioButtonGroupProps<TFieldValues>,
+): JSX.Element {
+  const {
+    helperText,
+    options,
+    label,
+    name,
+    labelKey = 'label',
+    valueKey = 'id',
+    required,
+    emptyOptionLabel,
+    returnObject,
+    row,
+    control,
+    defaultValue,
+    disabled,
+    shouldUnregister,
+    ...rest
+  } = props
+
   const theme = useTheme()
   const {
     field: { value, onChange },
@@ -55,13 +54,12 @@ export function RadioButtonGroup<TFieldValues extends FieldValues>({
     name,
     rules: required ? { required: i18n._(/* i18n */ 'This field is required') } : undefined,
     control,
+    defaultValue,
+    disabled,
+    shouldUnregister,
   })
 
-  helperText = error
-    ? typeof parseError === 'function'
-      ? parseError(error)
-      : error.message
-    : helperText
+  const parsedHelperText = error ? error.message : helperText
 
   const onRadioChange = (event: ChangeEvent<HTMLInputElement>) => {
     const radioValue = (event.target as HTMLInputElement).value
@@ -125,7 +123,7 @@ export function RadioButtonGroup<TFieldValues extends FieldValues>({
           )
         })}
       </RadioGroup>
-      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+      {parsedHelperText && <FormHelperText>{parsedHelperText}</FormHelperText>}
     </FormControl>
   )
 }

package/components/FormComponents/SliderElement.tsx

@@ -1,8 +1,8 @@
 import {
-  Controller,
   ControllerProps,
   FieldError,
   FieldValues,
+  useController,
 } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import {
@@ -16,8 +16,6 @@ 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
 } & Omit<ControllerProps<T>, 'render'>
@@ -27,39 +25,40 @@ export function SliderElement<TFieldValues extends FieldValues>({
   control,
   label,
   rules = {},
-  parseError,
   required,
   formControlProps,
+  defaultValue,
+  disabled,
+  shouldUnregister,
   ...other
 }: SliderElementProps<TFieldValues>) {
   if (required && !rules.required) {
     rules.required = i18n._(/* i18n */ 'This field is required')
   }
+
+  const {
+    field,
+    fieldState: { invalid, error },
+  } = useController({
+    name,
+    control,
+    rules,
+    defaultValue,
+    disabled,
+    shouldUnregister,
+  })
+
+  const parsedHelperText = error ? error.message : null
+
   return (
-    <Controller
-      name={name}
-      control={control}
-      rules={rules}
-      render={({ field, fieldState: { invalid, error } }) => {
-        const parsedHelperText = error
-          ? typeof parseError === 'function'
-            ? parseError(error)
-            : error.message
-          : null
-        return (
-          <FormControl error={invalid} required={required} fullWidth {...formControlProps}>
-            {label && (
-              <FormLabel component='legend' error={invalid}>
-                {label}
-              </FormLabel>
-            )}
-            <Slider {...other} {...field} valueLabelDisplay={other.valueLabelDisplay || 'auto'} />
-            {parsedHelperText && (
-              <FormHelperText error={invalid}>{parsedHelperText}</FormHelperText>
-            )}
-          </FormControl>
-        )
-      }}
-    />
+    <FormControl error={invalid} required={required} fullWidth {...formControlProps}>
+      {label && (
+        <FormLabel component='legend' error={invalid}>
+          {label}
+        </FormLabel>
+      )}
+      <Slider {...other} {...field} valueLabelDisplay={other.valueLabelDisplay || 'auto'} />
+      {parsedHelperText && <FormHelperText error={invalid}>{parsedHelperText}</FormHelperText>}
+    </FormControl>
   )
 }

package/components/FormComponents/SwitchElement.tsx

@@ -1,4 +1,4 @@
-import { Controller, FieldValues, ControllerProps } from '@graphcommerce/react-hook-form'
+import { FieldValues, ControllerProps, useController } from '@graphcommerce/react-hook-form'
 import { FormControlLabel, FormControlLabelProps, Switch } from '@mui/material'
 
 type IProps = Omit<FormControlLabelProps, 'control'>
@@ -8,18 +8,20 @@ export type SwitchElementProps<T extends FieldValues> = IProps & Omit<Controller
 export function SwitchElement<TFieldValues extends FieldValues>({
   name,
   control,
+  defaultValue,
+  disabled,
+  shouldUnregister,
+  rules,
   ...other
 }: SwitchElementProps<TFieldValues>) {
-  return (
-    <FormControlLabel
-      control={
-        <Controller
-          name={name}
-          control={control}
-          render={({ field }) => <Switch {...field} checked={!!field.value} />}
-        />
-      }
-      {...other}
-    />
-  )
+  const { field } = useController({
+    name,
+    control,
+    defaultValue,
+    disabled,
+    shouldUnregister,
+    rules,
+  })
+
+  return <FormControlLabel control={<Switch {...field} checked={!!field.value} />} {...other} />
 }

package/components/FormComponents/TelephoneElement.tsx

@@ -0,0 +1,23 @@
+import { FieldValues, phonePattern } from '@graphcommerce/react-hook-form'
+import { Trans, t } from '@lingui/macro'
+import { TextFieldElement, TextFieldElementProps } from './TextFieldElement'
+
+export type TelephoneElementProps<T extends FieldValues> = TextFieldElementProps<T>
+
+export function TelephoneElement<TFieldValues extends FieldValues>(
+  props: TelephoneElementProps<TFieldValues>,
+): JSX.Element {
+  const { rules, ...rest } = props
+  return (
+    <TextFieldElement
+      type='text'
+      label={<Trans>Telephone</Trans>}
+      autoComplete='tel'
+      rules={{
+        pattern: { value: phonePattern, message: t`Invalid phone number` },
+        ...rules,
+      }}
+      {...rest}
+    />
+  )
+}

package/components/FormComponents/TextFieldElement.tsx

@@ -1,8 +1,14 @@
 /* eslint-disable no-nested-ternary */
 import { InputCheckmark } from '@graphcommerce/next-ui'
-import { FieldValues, UseControllerProps, useController } from '@graphcommerce/react-hook-form'
+import {
+  FieldValues,
+  UseControllerProps,
+  emailPattern,
+  useController,
+} from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { TextField, TextFieldProps } from '@mui/material'
+import React, { useState } from 'react'
 
 export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<
   TextFieldProps,
@@ -22,7 +28,9 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
   control,
   defaultValue,
   rules = validation,
+  shouldUnregister,
   showValid,
+  disabled,
   ...rest
 }: TextFieldElementProps<TFieldValues>): JSX.Element {
   if (required && !rules.required) {
@@ -31,9 +39,7 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
 
   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,}))$/,
+      value: emailPattern,
       message: i18n._(/* i18n */ 'Please enter a valid email address'),
     }
   }
@@ -41,13 +47,26 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
   const {
     field: { onChange, ref, value = '', ...field },
     fieldState: { error },
-  } = useController({ name, control, rules, defaultValue })
+  } = useController({ name, control, rules, defaultValue, shouldUnregister, disabled })
+
+  // https://stackoverflow.com/questions/76830737/chrome-autofill-causes-textbox-collision-for-textfield-label-and-value
+  const [hasAutofill, setHasAutofill] = useState(false)
+  const shrink = hasAutofill || rest.InputLabelProps?.shrink || Boolean(value)
+  const onAnimationStart = (e: React.AnimationEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    if (e.target instanceof HTMLElement) {
+      const autofilled = !!e.target.matches('*:-webkit-autofill')
+      if (e.animationName === 'mui-auto-fill') setHasAutofill(autofilled)
+      if (e.animationName === 'mui-auto-fill-cancel') setHasAutofill(autofilled)
+    }
+    return rest.inputProps?.onAnimationStart?.(e)
+  }
 
   return (
     <TextField
       {...rest}
       {...field}
       value={value}
+      inputProps={{ ...rest.inputProps, onAnimationStart }}
       onChange={(ev) => {
         onChange(type === 'number' && ev.target.value ? Number(ev.target.value) : ev.target.value)
         rest.onChange?.(ev)
@@ -57,6 +76,7 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
       type={type}
       error={Boolean(error) || rest.error}
       helperText={error ? error.message : rest.helperText}
+      InputLabelProps={{ ...rest.InputLabelProps, shrink }}
       InputProps={{
         ...rest.InputProps,
         endAdornment: