@graphcommerce/ecommerce-ui 9.0.0-canary.78 → 9.0.0-canary.80

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @graphcommerce/ecommerce-ui
 
+## 9.0.0-canary.80
+
+### Patch Changes
+
+- [#2341](https://github.com/graphcommerce-org/graphcommerce/pull/2341) [`7085b4a`](https://github.com/graphcommerce-org/graphcommerce/commit/7085b4a86088328fe54dc4e82ccd296d6459cae7) - Updated all form FieldElements to also accept defaultValue, shouldUnregister and disabled. Moved AutoCompleteElement, CheckboxElement, MultiSelectElement, SliderElement, SwitchElement, ToggleButtonGroup to useController. Removed all parseError props ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+- [#2341](https://github.com/graphcommerce-org/graphcommerce/pull/2341) [`022cbd6`](https://github.com/graphcommerce-org/graphcommerce/commit/022cbd664ea4e8a82997c5edf4451b9182558429) - Moved ActionCardListForm to @graphcommerce/ecommerce-ui to resolve issue with circular dependencies. ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 9.0.0-canary.79
+
 ## 9.0.0-canary.78
 
 ## 9.0.0-canary.77

package/components/FormComponents/ActionCardListForm.tsx

@@ -0,0 +1,85 @@
+import { ActionCardList, ActionCardListProps, ActionCardProps } from '@graphcommerce/next-ui'
+import { ControllerProps, FieldValues, useController } from '@graphcommerce/react-hook-form'
+import React, { MouseEventHandler } from 'react'
+
+export type ActionCardItemBase = Pick<ActionCardProps, 'value'>
+
+export type ActionCardItemRenderProps<T> = ActionCardProps & {
+  onReset: MouseEventHandler<HTMLElement>
+} & T
+
+export type ActionCardListFormProps<A, F extends FieldValues = FieldValues> = Omit<
+  ActionCardListProps,
+  'value' | 'error' | 'onChange' | 'children'
+> &
+  Omit<ControllerProps<F>, 'render'> & {
+    items: A[]
+    render: React.FC<ActionCardItemRenderProps<A>>
+  }
+
+export function ActionCardListForm<
+  T extends ActionCardItemBase,
+  F extends FieldValues = FieldValues,
+>(props: ActionCardListFormProps<T, F>) {
+  const {
+    required,
+    rules,
+    items,
+    render,
+    control,
+    name,
+    errorMessage,
+    defaultValue,
+    multiple,
+    disabled,
+    shouldUnregister,
+    ...other
+  } = props
+  const RenderItem = render as React.FC<ActionCardItemRenderProps<ActionCardItemBase>>
+
+  function onSelect(itemValue: unknown, selectValues: unknown) {
+    return multiple
+      ? Array.isArray(selectValues) && selectValues.some((selectValue) => selectValue === itemValue)
+      : selectValues === itemValue
+  }
+
+  const {
+    field: { onChange, value, ref },
+    fieldState,
+    formState,
+  } = useController({
+    ...props,
+    control,
+    name,
+    defaultValue,
+    rules: { required, ...rules },
+    disabled,
+    shouldUnregister,
+  })
+
+  return (
+    <ActionCardList
+      {...other}
+      multiple={multiple}
+      required={required}
+      value={value}
+      ref={ref}
+      onChange={(_, incomming) => onChange(incomming)}
+      error={formState.isSubmitted && !!fieldState.error}
+      errorMessage={fieldState.error?.message}
+    >
+      {items.map((item) => (
+        <RenderItem
+          {...item}
+          key={`${item.value}`}
+          value={item.value}
+          selected={onSelect(item.value, value)}
+          onReset={(e) => {
+            e.preventDefault()
+            onChange(null)
+          }}
+        />
+      ))}
+    </ActionCardList>
+  )
+}

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/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

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/TextFieldElement.tsx

@@ -27,7 +27,9 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
   control,
   defaultValue,
   rules = validation,
+  shouldUnregister,
   showValid,
+  disabled,
   ...rest
 }: TextFieldElementProps<TFieldValues>): JSX.Element {
   if (required && !rules.required) {
@@ -44,7 +46,7 @@ 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 })
 
   return (
     <TextField

package/components/FormComponents/ToggleButtonGroup.tsx

@@ -1,8 +1,8 @@
 import {
-  Controller,
   ControllerProps,
   FieldError,
   FieldValues,
+  useController,
 } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import {
@@ -25,8 +25,6 @@ type SingleToggleButtonProps = Omit<ToggleButtonProps, 'value' | 'children'> & {
 export type ToggleButtonGroupElementProps<T extends FieldValues> = ToggleButtonGroupProps & {
   required?: boolean
   label?: string
-  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
-  parseError?: (error: FieldError) => string
   options: SingleToggleButtonProps[]
   formLabelProps?: FormLabelProps
   helperText?: string
@@ -39,9 +37,11 @@ export function ToggleButtonGroupElement<TFieldValues extends FieldValues = Fiel
   rules = {},
   required,
   options = [],
-  parseError,
   helperText,
   formLabelProps,
+  defaultValue,
+  disabled,
+  shouldUnregister,
   ...toggleButtonGroupProps
 }: ToggleButtonGroupElementProps<TFieldValues>) {
   if (required && !rules.required) {
@@ -49,50 +49,51 @@ export function ToggleButtonGroupElement<TFieldValues extends FieldValues = Fiel
   }
 
   const isRequired = required || !!rules?.required
+
+  const {
+    field: { value, onChange, onBlur },
+    fieldState: { invalid, error },
+  } = useController({
+    name,
+    control,
+    rules,
+    defaultValue,
+    disabled,
+    shouldUnregister,
+  })
+
+  const renderHelperText = error ? error.message : helperText
+
   return (
-    <Controller
-      name={name}
-      control={control}
-      rules={rules}
-      render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => {
-        const renderHelperText = error
-          ? typeof parseError === 'function'
-            ? parseError(error)
-            : error.message
-          : helperText
-        return (
-          <FormControl error={invalid} required={isRequired}>
-            {label && (
-              <FormLabel
-                {...formLabelProps}
-                error={invalid}
-                required={isRequired}
-                sx={{ mb: 1, ...formLabelProps?.sx }}
-              >
-                {label}
-              </FormLabel>
-            )}
-            <ToggleButtonGroup
-              {...toggleButtonGroupProps}
-              value={value}
-              onBlur={onBlur}
-              onChange={(event, val) => {
-                onChange(val)
-                if (typeof toggleButtonGroupProps.onChange === 'function') {
-                  toggleButtonGroupProps.onChange(event, val)
-                }
-              }}
-            >
-              {options.map(({ label, id, ...toggleProps }) => (
-                <ToggleButton value={id} {...toggleProps} key={id}>
-                  {label}
-                </ToggleButton>
-              ))}
-            </ToggleButtonGroup>
-            {renderHelperText && <FormHelperText>{renderHelperText}</FormHelperText>}
-          </FormControl>
-        )
-      }}
-    />
+    <FormControl error={invalid} required={isRequired}>
+      {label && (
+        <FormLabel
+          {...formLabelProps}
+          error={invalid}
+          required={isRequired}
+          sx={{ mb: 1, ...formLabelProps?.sx }}
+        >
+          {label}
+        </FormLabel>
+      )}
+      <ToggleButtonGroup
+        {...toggleButtonGroupProps}
+        value={value}
+        onBlur={onBlur}
+        onChange={(event, val) => {
+          onChange(val)
+          if (typeof toggleButtonGroupProps.onChange === 'function') {
+            toggleButtonGroupProps.onChange(event, val)
+          }
+        }}
+      >
+        {options.map(({ label, id, ...toggleProps }) => (
+          <ToggleButton value={id} {...toggleProps} key={id}>
+            {label}
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+      {renderHelperText && <FormHelperText>{renderHelperText}</FormHelperText>}
+    </FormControl>
   )
 }

package/components/FormComponents/index.ts

@@ -1,3 +1,4 @@
+export * from './ActionCardListForm'
 export * from './AutoCompleteElement'
 export * from './CheckboxButtonGroup'
 export * from './CheckboxElement'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.78",
+  "version": "9.0.0-canary.80",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,12 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.78",
-    "@graphcommerce/graphql": "^9.0.0-canary.78",
-    "@graphcommerce/next-ui": "^9.0.0-canary.78",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.78",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.78",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.78",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.80",
+    "@graphcommerce/graphql": "^9.0.0-canary.80",
+    "@graphcommerce/next-ui": "^9.0.0-canary.80",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.80",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.80",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.80",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",