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

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}
+    />
+  )
+}

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>
   )
 }