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

package/components/FormComponents/AutoCompleteElement.tsx

@@ -1,5 +1,10 @@
 /* eslint-disable @typescript-eslint/no-restricted-imports */
-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 {
   Autocomplete,
@@ -48,6 +53,9 @@ export function AutocompleteElement<TFieldValues extends FieldValues>({
   multiple,
   matchId,
   label,
+  disabled,
+  defaultValue,
+  shouldUnregister,
 }: AutocompleteElementProps<
   TFieldValues,
   AutoDefault | string | any,
@@ -60,99 +68,102 @@ export function AutocompleteElement<TFieldValues extends FieldValues>({
       required: rules?.required || i18n._(/* i18n */ 'This field is required'),
     }),
   }
+
+  const {
+    field: { onChange, onBlur, value, ...fieldRest },
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+    rules: validationRules,
+    defaultValue,
+    disabled,
+    shouldUnregister,
+  })
+
+  const values = Array.isArray(value) ? (value as (typeof value)[]) : [value]
+  let currentValue = multiple ? value || [] : value || null
+  if (matchId) {
+    currentValue = multiple
+      ? values.map((i: any) => options.find((j) => (j.id || j) === i))
+      : options.find((i) => (i.id || i) === value) || null
+  }
+
   return (
-    <Controller
-      name={name}
-      control={control}
-      rules={validationRules}
-      render={({ field: { onChange, onBlur, value, ...fieldRest }, fieldState: { error } }) => {
-        const values = Array.isArray(value) ? (value as (typeof value)[]) : [value]
-        let currentValue = multiple ? value || [] : value || null
+    <Autocomplete
+      {...autocompleteProps}
+      value={currentValue}
+      loading={loading}
+      multiple={multiple}
+      options={options}
+      disableCloseOnSelect={
+        typeof autocompleteProps?.disableCloseOnSelect === 'boolean'
+          ? autocompleteProps.disableCloseOnSelect
+          : !!multiple
+      }
+      isOptionEqualToValue={
+        autocompleteProps?.isOptionEqualToValue
+          ? autocompleteProps.isOptionEqualToValue
+          : (option, v) => (v ? option.id === (v?.id || v) : false)
+      }
+      getOptionLabel={
+        autocompleteProps?.getOptionLabel
+          ? autocompleteProps.getOptionLabel
+          : (option) => `${option?.label || option}`
+      }
+      onChange={(event, value, reason, details) => {
+        let changedVal = value
         if (matchId) {
-          currentValue = multiple
-            ? values.map((i: any) => options.find((j) => (j.id || j) === i))
-            : options.find((i) => (i.id || i) === value) || null
+          changedVal = Array.isArray(value) ? value.map((i: any) => i?.id || i) : value?.id || value
+        }
+        onChange(changedVal)
+        if (autocompleteProps?.onChange) {
+          autocompleteProps.onChange(event, value, reason, details)
+        }
+      }}
+      renderOption={
+        autocompleteProps?.renderOption ??
+        (showCheckbox
+          ? (props, option, { selected }) => (
+              <li {...props}>
+                <Checkbox sx={{ marginRight: 1 }} checked={selected} />
+                {autocompleteProps?.getOptionLabel?.(option) || option.label || option}
+              </li>
+            )
+          : undefined)
+      }
+      onBlur={(event) => {
+        onBlur()
+        if (typeof autocompleteProps?.onBlur === 'function') {
+          autocompleteProps.onBlur(event)
         }
-        return (
-          <Autocomplete
-            {...autocompleteProps}
-            value={currentValue}
-            loading={loading}
-            multiple={multiple}
-            options={options}
-            disableCloseOnSelect={
-              typeof autocompleteProps?.disableCloseOnSelect === 'boolean'
-                ? autocompleteProps.disableCloseOnSelect
-                : !!multiple
-            }
-            isOptionEqualToValue={
-              autocompleteProps?.isOptionEqualToValue
-                ? autocompleteProps.isOptionEqualToValue
-                : (option, v) => (v ? option.id === (v?.id || v) : false)
-            }
-            getOptionLabel={
-              autocompleteProps?.getOptionLabel
-                ? autocompleteProps.getOptionLabel
-                : (option) => `${option?.label || option}`
-            }
-            onChange={(event, value, reason, details) => {
-              let changedVal = value
-              if (matchId) {
-                changedVal = Array.isArray(value)
-                  ? value.map((i: any) => i?.id || i)
-                  : value?.id || value
-              }
-              onChange(changedVal)
-              if (autocompleteProps?.onChange) {
-                autocompleteProps.onChange(event, value, reason, details)
-              }
-            }}
-            renderOption={
-              autocompleteProps?.renderOption ??
-              (showCheckbox
-                ? (props, option, { selected }) => (
-                    <li {...props}>
-                      <Checkbox sx={{ marginRight: 1 }} checked={selected} />
-                      {autocompleteProps?.getOptionLabel?.(option) || option.label || option}
-                    </li>
-                  )
-                : undefined)
-            }
-            onBlur={(event) => {
-              onBlur()
-              if (typeof autocompleteProps?.onBlur === 'function') {
-                autocompleteProps.onBlur(event)
-              }
-            }}
-            renderInput={(params) => (
-              <TextField
-                name={name}
-                required={rules?.required ? true : required}
-                label={label}
-                {...textFieldProps}
-                {...params}
-                error={!!error}
-                InputProps={{
-                  ...params.InputProps,
-                  endAdornment: (
-                    <>
-                      {loading ? <CircularProgress color='inherit' size={20} /> : null}
-                      {params.InputProps.endAdornment}
-                    </>
-                  ),
-                  ...textFieldProps?.InputProps,
-                }}
-                inputProps={{
-                  ...params.inputProps,
-                  ...textFieldProps?.inputProps,
-                }}
-                helperText={error ? error.message : textFieldProps?.helperText}
-              />
-            )}
-            {...fieldRest}
-          />
-        )
       }}
+      renderInput={(params) => (
+        <TextField
+          name={name}
+          required={rules?.required ? true : required}
+          label={label}
+          {...textFieldProps}
+          {...params}
+          error={!!error}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <>
+                {loading ? <CircularProgress color='inherit' size={20} /> : null}
+                {params.InputProps.endAdornment}
+              </>
+            ),
+            ...textFieldProps?.InputProps,
+          }}
+          inputProps={{
+            ...params.inputProps,
+            ...textFieldProps?.inputProps,
+          }}
+          helperText={error ? error.message : textFieldProps?.helperText}
+        />
+      )}
+      {...fieldRest}
     />
   )
 }

package/components/FormComponents/CheckboxButtonGroup.tsx

@@ -1,10 +1,4 @@
-/* eslint-disable @typescript-eslint/no-restricted-imports */
-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 {
   Checkbox,
@@ -21,8 +15,6 @@ 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
   valueKey?: string
@@ -33,22 +25,27 @@ export type CheckboxButtonGroupProps<T extends FieldValues> = {
   checkboxColor?: CheckboxProps['color']
 } & UseControllerProps<T>
 
-export function CheckboxButtonGroup<TFieldValues extends FieldValues>({
-  helperText,
-  options,
-  label,
-  name,
-  parseError,
-  required,
-  labelKey = 'label',
-  valueKey = 'id',
-  returnObject,
-  disabled,
-  row,
-  control,
-  checkboxColor,
-  ...rest
-}: CheckboxButtonGroupProps<TFieldValues>): JSX.Element {
+export function CheckboxButtonGroup<TFieldValues extends FieldValues>(
+  props: CheckboxButtonGroupProps<TFieldValues>,
+): JSX.Element {
+  const {
+    helperText,
+    options,
+    label,
+    name,
+    required,
+    labelKey = 'label',
+    valueKey = 'id',
+    returnObject,
+    disabled,
+    row,
+    control,
+    checkboxColor,
+    defaultValue,
+    shouldUnregister,
+    ...rest
+  } = props
+
   const theme = useTheme()
   const {
     field: { value = [], onChange },
@@ -57,13 +54,12 @@ export function CheckboxButtonGroup<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 handleChange = (index: number | string) => {
     const newArray: (string | number)[] | any[] = [...value]
@@ -120,7 +116,7 @@ export function CheckboxButtonGroup<TFieldValues extends FieldValues>({
           )
         })}
       </FormGroup>
-      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+      {parsedHelperText && <FormHelperText>{parsedHelperText}</FormHelperText>}
     </FormControl>
   )
 }

package/components/FormComponents/CheckboxElement.tsx

@@ -1,9 +1,4 @@
-import {
-  Controller,
-  ControllerProps,
-  FieldError,
-  FieldValues,
-} from '@graphcommerce/react-hook-form'
+import { ControllerProps, FieldValues, useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import {
   Checkbox,
@@ -19,70 +14,71 @@ 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
   sx?: SxProps<Theme>
   formControl?: Omit<FormControlProps<'div'>, 'required' | 'error'>
 } & Omit<ControllerProps<T>, 'render'>
 
-export function CheckboxElement<TFieldValues extends FieldValues>({
-  name,
-  rules = {},
-  required,
-  parseError,
-  label,
-  control,
-  helperText,
-  sx,
-  formControl,
-  ...rest
-}: CheckboxElementProps<TFieldValues>): JSX.Element {
+export function CheckboxElement<TFieldValues extends FieldValues>(
+  props: CheckboxElementProps<TFieldValues>,
+): JSX.Element {
+  const {
+    name,
+    rules = {},
+    required,
+    label,
+    control,
+    helperText,
+    sx,
+    formControl,
+    defaultValue,
+    disabled,
+    shouldUnregister,
+    ...rest
+  } = props
+
   if (required && !rules.required) {
     rules.required = i18n._(/* i18n */ 'This field is required')
   }
 
+  const {
+    field: { value, onChange, ref, ...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, ref, ...field }, fieldState: { invalid, error } }) => {
-        // eslint-disable-next-line no-nested-ternary
-        const parsedHelperText = error
-          ? typeof parseError === 'function'
-            ? parseError(error)
-            : error.message
-          : helperText
-        return (
-          <FormControl required={required} error={invalid} {...formControl}>
-            <FormGroup row>
-              <FormControlLabel
-                label={label || ''}
-                control={
-                  <Checkbox
-                    {...rest}
-                    {...field}
-                    inputRef={ref}
-                    color={rest.color || 'primary'}
-                    sx={{
-                      ...(Array.isArray(sx) ? sx : [sx]),
-                      color: invalid ? 'error.main' : undefined,
-                    }}
-                    value={value}
-                    checked={!!value}
-                    onChange={() => onChange(!value)}
-                  />
-                }
-              />
-            </FormGroup>
-            {parsedHelperText && (
-              <FormHelperText error={invalid}>{parsedHelperText}</FormHelperText>
-            )}
-          </FormControl>
-        )
-      }}
-    />
+    <FormControl required={required} error={invalid} {...formControl}>
+      <FormGroup row>
+        <FormControlLabel
+          label={label || ''}
+          control={
+            <Checkbox
+              {...rest}
+              {...field}
+              inputRef={ref}
+              color={rest.color || 'primary'}
+              sx={{
+                ...(Array.isArray(sx) ? sx : [sx]),
+                color: invalid ? 'error.main' : undefined,
+              }}
+              value={value}
+              checked={!!value}
+              onChange={() => onChange(!value)}
+            />
+          }
+        />
+      </FormGroup>
+      {parsedHelperText && <FormHelperText error={invalid}>{parsedHelperText}</FormHelperText>}
+    </FormControl>
   )
 }

package/components/FormComponents/EmailElement.tsx

@@ -0,0 +1,27 @@
+import { emailPattern, FieldValues } from '@graphcommerce/react-hook-form'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
+import { TextFieldElement, TextFieldElementProps } from './TextFieldElement'
+
+export type EmailElementProps<T extends FieldValues> = TextFieldElementProps<T>
+
+export function EmailElement<TFieldValues extends FieldValues>(
+  props: EmailElementProps<TFieldValues>,
+): JSX.Element {
+  const { rules, ...rest } = props
+  return (
+    <TextFieldElement
+      type='email'
+      label={<Trans id='Email address' />}
+      autoComplete='email'
+      rules={{
+        pattern: {
+          value: emailPattern,
+          message: i18n._(/* i18n */ 'Please enter a valid email address'),
+        },
+        ...rules,
+      }}
+      {...rest}
+    />
+  )
+}