@graphcommerce/ecommerce-ui 9.0.3 → 9.0.4-canary.1

package/CHANGELOG.md

@@ -1,16 +1,12 @@
 # @graphcommerce/ecommerce-ui
 
-## 9.0.3
+## 9.0.4-canary.1
 
-## 9.0.3-canary.0
-
-## 9.0.2
-
-## 9.0.2-canary.0
+### Patch Changes
 
-## 9.0.1
+- [#2470](https://github.com/graphcommerce-org/graphcommerce/pull/2470) [`910e6aa`](https://github.com/graphcommerce-org/graphcommerce/commit/910e6aab024a925bb042cf17968b2ab826f97d88) - Refactor the FormComponents for better TypeScript checking performance. ([@paales](https://github.com/paales))
 
-## 9.0.1-canary.1
+## 9.0.4-canary.0
 
 ## 9.0.0
 

package/components/ComposedSubmitButton/ComposedSubmitButton.tsx

@@ -1,5 +1,5 @@
 import type { ButtonProps } from '@graphcommerce/next-ui'
-import { Button, IconSvg, iconChevronRight } from '@graphcommerce/next-ui'
+import { Button, iconChevronRight, IconSvg } from '@graphcommerce/next-ui'
 import type { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
 import { forwardRef } from 'react'
 

package/components/ComposedSubmitButton/ComposedSubmitLinkOrButton.tsx

@@ -1,5 +1,5 @@
 import type { LinkOrButtonProps } from '@graphcommerce/next-ui'
-import { IconSvg, LinkOrButton, iconChevronRight } from '@graphcommerce/next-ui'
+import { iconChevronRight, IconSvg, LinkOrButton } from '@graphcommerce/next-ui'
 import type { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
 import { forwardRef } from 'react'
 

package/components/FormComponents/CheckboxButtonGroup.tsx

@@ -1,4 +1,4 @@
-import type { FieldValues, UseControllerProps } from '@graphcommerce/react-hook-form'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import type { CheckboxProps } from '@mui/material'
@@ -11,27 +11,33 @@ import {
   FormLabel,
   useTheme,
 } from '@mui/material'
+import type { BaseControllerProps } from './types'
 
-export type CheckboxButtonGroupProps<T extends FieldValues> = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  options: { id: string | number; label: string }[] | any[]
+type OptionBase = { id: string | number; label: string | number }
+
+type AdditionalProps<TOption extends OptionBase = OptionBase> = {
+  options: TOption[]
   helperText?: string
   required?: boolean
   label?: string
-  labelKey?: string
-  valueKey?: string
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  onChange?: Function
-  returnObject?: boolean
+  labelKey?: keyof TOption
+  valueKey?: keyof TOption
+  onChange?: (value: (string | number)[]) => void
   disabled?: boolean
   row?: boolean
   checkboxColor?: CheckboxProps['color']
-} & UseControllerProps<T>
+}
 
-/** @public */
-export function CheckboxButtonGroup<TFieldValues extends FieldValues>(
+export type CheckboxButtonGroupProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TOption extends OptionBase = OptionBase,
+> = BaseControllerProps<TFieldValues> & AdditionalProps<TOption>
+
+type CheckboxButtonGroupComponent = <TFieldValues extends FieldValues>(
   props: CheckboxButtonGroupProps<TFieldValues>,
-): JSX.Element {
+) => React.ReactNode
+
+function CheckboxButtonGroupBase(props: CheckboxButtonGroupProps) {
   const {
     helperText,
     options,
@@ -40,7 +46,6 @@ export function CheckboxButtonGroup<TFieldValues extends FieldValues>(
     required,
     labelKey = 'label',
     valueKey = 'id',
-    returnObject,
     disabled,
     row,
     control,
@@ -65,57 +70,37 @@ export function CheckboxButtonGroup<TFieldValues extends FieldValues>(
 
   const parsedHelperText = error ? error.message : helperText
 
-  const handleChange = (index: number | string) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const newArray: (string | number)[] | any[] = [...value]
-    const exists =
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      value.findIndex((i: any) => (returnObject ? i[valueKey] === index : i === index)) === -1
-    if (exists) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      newArray.push(returnObject ? options.find((i) => i[valueKey] === index) : index)
+  const handleChange = (optionKey: string | number) => {
+    const currentValue = value as (string | number)[]
+    const newArray = [...currentValue]
+
+    const index = currentValue.indexOf(optionKey)
+    if (index === -1) {
+      newArray.push(optionKey)
     } else {
-      newArray.splice(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        value.findIndex((i: any) => (returnObject ? i[valueKey] === index : i === index)),
-        1,
-      )
+      newArray.splice(index, 1)
     }
-    // setValue(name, newArray, { shouldValidate: true })
+
     onChange(newArray)
-    if (typeof rest.onChange === 'function') {
-      rest.onChange(newArray)
-    }
+    rest.onChange?.(newArray)
   }
 
   return (
     <FormControl error={invalid} required={required}>
       {label && <FormLabel error={invalid}>{label}</FormLabel>}
       <FormGroup row={row}>
-        {options.map((option: any) => {
+        {options.map((option) => {
           const optionKey = option[valueKey]
-          if (!optionKey) {
-            console.error(
-              `CheckboxButtonGroup: valueKey ${valueKey} does not exist on option`,
-              option,
-            )
-          }
-          const isChecked =
-            value.findIndex((item) =>
-              returnObject ? item[valueKey] === optionKey : item === optionKey,
-            ) !== -1
+          const isChecked = (value as (string | number)[]).includes(optionKey)
           return (
             <FormControlLabel
               control={
                 <Checkbox
-                  sx={{
-                    color: invalid ? theme.palette.error.main : undefined,
-                  }}
+                  sx={{ color: invalid ? theme.palette.error.main : undefined }}
                   color={checkboxColor || 'primary'}
                   value={optionKey}
                   checked={isChecked}
                   disabled={disabled}
-                  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                   onChange={() => handleChange(optionKey)}
                 />
               }
@@ -129,3 +114,6 @@ export function CheckboxButtonGroup<TFieldValues extends FieldValues>(
     </FormControl>
   )
 }
+
+/** @public */
+export const CheckboxButtonGroup = CheckboxButtonGroupBase as CheckboxButtonGroupComponent

package/components/FormComponents/CheckboxElement.tsx

@@ -1,4 +1,4 @@
-import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import type {
@@ -16,18 +16,23 @@ import {
   FormHelperText,
   useForkRef,
 } from '@mui/material'
+import type { FieldElementProps } from './types'
 
-export type CheckboxElementProps<T extends FieldValues> = Omit<CheckboxProps, 'name'> & {
+type AdditionalProps = {
   label?: FormControlLabelProps['label']
   helperText?: string
   sx?: SxProps<Theme>
   formControl?: Omit<FormControlProps<'div'>, 'required' | 'error'>
-} & Omit<ControllerProps<T>, 'render'>
+}
 
-/** @public */
-export function CheckboxElement<TFieldValues extends FieldValues>(
+export type CheckboxElementProps<TFieldValues extends FieldValues = FieldValues> =
+  FieldElementProps<TFieldValues, CheckboxProps> & AdditionalProps
+
+type CheckboxElementComponent = <TFieldValues extends FieldValues>(
   props: CheckboxElementProps<TFieldValues>,
-): JSX.Element {
+) => React.ReactNode
+
+function CheckboxElementBase(props: CheckboxElementProps): JSX.Element {
   const {
     name,
     rules = {},
@@ -48,7 +53,7 @@ export function CheckboxElement<TFieldValues extends FieldValues>(
   }
 
   const {
-    field: { value, onChange, ref, ...field },
+    field: { value, onChange, ref, onBlur },
     fieldState: { invalid, error },
   } = useController({
     name,
@@ -69,7 +74,9 @@ export function CheckboxElement<TFieldValues extends FieldValues>(
           control={
             <Checkbox
               {...rest}
-              {...field}
+              onBlur={onBlur}
+              disabled={disabled}
+              name={name}
               inputRef={useForkRef(ref, rest.inputRef)}
               color={rest.color || 'primary'}
               sx={{
@@ -87,3 +94,6 @@ export function CheckboxElement<TFieldValues extends FieldValues>(
     </FormControl>
   )
 }
+
+/** @public */
+export const CheckboxElement = CheckboxElementBase as CheckboxElementComponent

package/components/FormComponents/InputBaseElement.tsx

@@ -1,24 +1,21 @@
-/* eslint-disable no-nested-ternary */
-import { FieldValues, UseControllerProps, useController } from '@graphcommerce/react-hook-form'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
-import { InputBase, InputBaseProps } from '@mui/material'
+import type { InputBaseProps } from '@mui/material'
+import { InputBase } from '@mui/material'
 import React from 'react'
+import type { FieldElementProps } from './types'
 
-export type InputBaseElementProps<T extends FieldValues = FieldValues> = Omit<
-  InputBaseProps,
-  'name' | 'defaultValue'
-> & {
-  showValid?: boolean
-} & UseControllerProps<T>
+export type InputBaseElementProps<TFieldValues extends FieldValues = FieldValues> =
+  FieldElementProps<TFieldValues, InputBaseProps>
 
 type InputBaseElementComponent = <TFieldValues extends FieldValues>(
   props: InputBaseElementProps<TFieldValues> & { ref?: React.Ref<HTMLInputElement> },
-) => JSX.Element
+) => React.ReactNode
 
-export const InputBaseElement = React.forwardRef<
-  HTMLInputElement,
-  InputBaseElementProps<FieldValues>
->((props: InputBaseElementProps<FieldValues>, ref: React.Ref<HTMLInputElement>): JSX.Element => {
+function InputBaseElementBase(
+  props: InputBaseElementProps & { ref?: React.Ref<HTMLInputElement> },
+): JSX.Element {
   const {
     type,
     required,
@@ -27,19 +24,26 @@ export const InputBaseElement = React.forwardRef<
     defaultValue,
     rules = {},
     shouldUnregister,
-    showValid,
     disabled,
+    ref,
     ...rest
   } = props
 
-  if (required && !rules?.required) {
+  if (required && !rules.required) {
     rules.required = i18n._(/* i18n */ 'This field is required')
   }
 
   const {
     field,
     fieldState: { error },
-  } = useController({ name, control, rules, defaultValue, shouldUnregister, disabled })
+  } = useController({
+    name,
+    control,
+    rules,
+    defaultValue,
+    shouldUnregister,
+    disabled,
+  })
 
   return (
     <InputBase
@@ -51,4 +55,9 @@ export const InputBaseElement = React.forwardRef<
       error={Boolean(error) || rest.error}
     />
   )
-}) as InputBaseElementComponent
+}
+
+/** @public */
+export const InputBaseElement = React.forwardRef<HTMLInputElement, InputBaseElementProps>(
+  (props, ref) => InputBaseElementBase({ ...props, ref }),
+) as InputBaseElementComponent

package/components/FormComponents/NumberFieldElement.tsx

@@ -5,20 +5,25 @@ import {
   IconSvg,
   responsiveVal,
 } from '@graphcommerce/next-ui'
-import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
-import { Controller, useController } from '@graphcommerce/react-hook-form'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import type { IconButtonProps, SxProps, TextFieldProps, Theme } from '@mui/material'
 import { Fab, TextField, useForkRef } from '@mui/material'
+import type { FieldElementProps } from './types'
 
-export type NumberFieldElementProps<T extends FieldValues = FieldValues> = Omit<
-  TextFieldProps,
-  'type' | 'defaultValue'
-> & {
+type AdditionalProps = {
   DownProps?: IconButtonProps
   UpProps?: IconButtonProps
   sx?: SxProps<Theme>
-} & Omit<ControllerProps<T>, 'render'>
+}
+
+export type NumberFieldElementProps<TFieldValues extends FieldValues = FieldValues> =
+  FieldElementProps<TFieldValues, Omit<TextFieldProps, 'type'>> & AdditionalProps
+
+type NumberFieldElementComponent = <TFieldValues extends FieldValues>(
+  props: NumberFieldElementProps<TFieldValues>,
+) => React.ReactNode
 
 type OwnerState = { size?: 'small' | 'medium' }
 const componentName = 'TextInputNumber'
@@ -29,7 +34,7 @@ const { withState } = extendableComponent<OwnerState, typeof componentName, type
 )
 
 /** @public */
-export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElementProps<T>) {
+function NumberFieldElementBase(props: NumberFieldElementProps) {
   const {
     DownProps = {},
     UpProps = {},
@@ -182,3 +187,5 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
     />
   )
 }
+
+export const NumberFieldElement = NumberFieldElementBase as NumberFieldElementComponent

package/components/FormComponents/RadioButtonGroup.tsx

@@ -1,4 +1,4 @@
-import type { FieldValues, UseControllerProps } from '@graphcommerce/react-hook-form'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import {
@@ -11,27 +11,33 @@ import {
   useTheme,
 } from '@mui/material'
 import type { ChangeEvent } from 'react'
+import type { BaseControllerProps } from './types'
 
-export type RadioButtonGroupProps<T extends FieldValues> = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  options: { label: string; id: string | number }[] | any[]
+type OptionBase = { id: string | number; label: string | number }
+
+type AdditionalProps<TOption extends OptionBase = OptionBase> = {
+  options: TOption[]
   helperText?: string
   required?: boolean
   label?: string
-  labelKey?: string
-  valueKey?: string
-  type?: 'number' | 'string'
-  emptyOptionLabel?: 'string'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onChange?: (value: any) => void
-  returnObject?: boolean
+  labelKey?: keyof TOption
+  valueKey?: keyof TOption
+  onChange?: (value: string | number) => void
+  disabled?: boolean
   row?: boolean
-} & UseControllerProps<T>
+  emptyOptionLabel?: string
+}
 
-/** @public */
-export function RadioButtonGroup<TFieldValues extends FieldValues>(
+export type RadioButtonGroupProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TOption extends OptionBase = OptionBase,
+> = BaseControllerProps<TFieldValues> & AdditionalProps<TOption>
+
+type RadioButtonGroupComponent = <TFieldValues extends FieldValues>(
   props: RadioButtonGroupProps<TFieldValues>,
-): JSX.Element {
+) => React.ReactNode
+
+function RadioButtonGroupBase(props: RadioButtonGroupProps): JSX.Element {
   const {
     helperText,
     options,
@@ -41,7 +47,6 @@ export function RadioButtonGroup<TFieldValues extends FieldValues>(
     valueKey = 'id',
     required,
     emptyOptionLabel,
-    returnObject,
     row,
     control,
     defaultValue,
@@ -65,26 +70,16 @@ export function RadioButtonGroup<TFieldValues extends FieldValues>(
 
   const parsedHelperText = error ? error.message : helperText
 
-  const onRadioChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const radioValue = (event.target as HTMLInputElement).value
-    const returnValue = returnObject
-      ? options.find((items) => items[valueKey] === radioValue)
-      : radioValue
-    // setValue(name, returnValue, { shouldValidate: true })
-    onChange(returnValue)
-    if (typeof rest.onChange === 'function') {
-      rest.onChange(returnValue)
-    }
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const radioValue = event.target.value
+    onChange(radioValue)
+    rest.onChange?.(radioValue)
   }
 
   return (
-    <FormControl error={invalid}>
-      {label && (
-        <FormLabel required={required} error={invalid}>
-          {label}
-        </FormLabel>
-      )}
-      <RadioGroup onChange={onRadioChange} name={name} row={row} value={value || ''}>
+    <FormControl error={invalid} required={required}>
+      {label && <FormLabel error={invalid}>{label}</FormLabel>}
+      <RadioGroup onChange={handleChange} name={name} row={row} value={value ?? ''}>
         {emptyOptionLabel && (
           <FormControlLabel
             control={
@@ -101,15 +96,6 @@ export function RadioButtonGroup<TFieldValues extends FieldValues>(
         )}
         {options.map((option) => {
           const optionKey = option[valueKey]
-          if (!optionKey) {
-            console.error(
-              `CheckboxButtonGroup: valueKey ${valueKey} does not exist on option`,
-              option,
-            )
-          }
-          const isChecked = !!(
-            value && (returnObject ? value[valueKey] === optionKey : value === optionKey)
-          )
           return (
             <FormControlLabel
               control={
@@ -117,7 +103,7 @@ export function RadioButtonGroup<TFieldValues extends FieldValues>(
                   sx={{
                     color: invalid ? theme.palette.error.main : undefined,
                   }}
-                  checked={isChecked}
+                  checked={value === optionKey}
                 />
               }
               value={optionKey}
@@ -131,3 +117,6 @@ export function RadioButtonGroup<TFieldValues extends FieldValues>(
     </FormControl>
   )
 }
+
+/** @public */
+export const RadioButtonGroup = RadioButtonGroupBase as RadioButtonGroupComponent

package/components/FormComponents/SelectElement.tsx

@@ -1,87 +1,31 @@
-import { InputCheckmark } from '@graphcommerce/next-ui'
-import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
-import { useController } from '@graphcommerce/react-hook-form'
-import { i18n } from '@lingui/core'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
 import type { TextFieldProps } from '@mui/material'
-import { MenuItem, TextField, useForkRef } from '@mui/material'
+import { MenuItem } from '@mui/material'
+import { TextFieldElement, type TextFieldElementProps } from './TextFieldElement'
 
 type OptionBase = { id: string | number; label: string | number }
 
-export type SelectElementProps<T extends FieldValues, O extends OptionBase> = Omit<
-  TextFieldProps,
-  'name' | 'type' | 'onChange' | 'defaultValue'
-> & {
-  options?: O[]
-  type?: 'string' | 'number'
-  onChange?: (value: string | number) => void
-  showValid?: boolean
-} & Omit<ControllerProps<T>, 'render'>
+type AdditionalProps<O extends OptionBase = OptionBase> = { options: O[] }
 
-/** @public */
-export function SelectElement<TFieldValues extends FieldValues, O extends OptionBase>({
-  name,
-  required,
-  options = [],
-  type,
-  control,
-  defaultValue,
-  rules = {},
-  showValid,
-  disabled,
-  shouldUnregister,
-  ...rest
-}: SelectElementProps<TFieldValues, O>): JSX.Element {
-  const isNativeSelect = !!rest.SelectProps?.native
-  const ChildComponent = isNativeSelect ? 'option' : MenuItem
+export type SelectElementProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TOption extends OptionBase = OptionBase,
+> = Omit<TextFieldElementProps<TFieldValues>, 'select'> & AdditionalProps<TOption>
 
-  if (required && !rules.required) {
-    rules.required = i18n._(/* i18n */ 'This field is required')
-  }
+type SelectElementComponent = <TFieldValues extends FieldValues>(
+  props: SelectElementProps<TFieldValues>,
+) => React.ReactNode
 
-  const {
-    field: { onChange, value, ref, ...field },
-    fieldState: { invalid, error },
-  } = useController({
-    name,
-    rules,
-    control,
-    defaultValue,
-    disabled,
-    shouldUnregister,
-  })
+/** @public */
+function SelectElementBase(props: SelectElementProps): JSX.Element {
+  const { options } = props as AdditionalProps
+  const { SelectProps } = props as TextFieldProps
 
-  // handle shrink on number input fields
-  if (type === 'number' && typeof value !== 'undefined') {
-    rest.InputLabelProps = rest.InputLabelProps || {}
-    rest.InputLabelProps.shrink = true
-  }
+  const isNativeSelect = !!SelectProps?.native
+  const ChildComponent = isNativeSelect ? 'option' : MenuItem
 
   return (
-    <TextField
-      {...rest}
-      value={value ?? ''}
-      {...field}
-      inputRef={useForkRef(ref, rest.inputRef)}
-      onChange={(event) => {
-        let item: number | string | O | undefined = event.target.value
-        if (type === 'number') item = Number(item)
-        rest.onChange?.(item)
-        onChange(item)
-      }}
-      select
-      required={required}
-      error={invalid}
-      helperText={error ? error.message : rest.helperText}
-      InputProps={{
-        ...rest.InputProps,
-        endAdornment:
-          showValid && value && !error ? (
-            <InputCheckmark show={!error} />
-          ) : (
-            rest.InputProps?.endAdornment
-          ),
-      }}
-    >
+    <TextFieldElement {...props} select>
       {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
       {isNativeSelect && <option />}
       {options.map((item) => (
@@ -89,6 +33,8 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
           {item.label}
         </ChildComponent>
       ))}
-    </TextField>
+    </TextFieldElement>
   )
 }
+
+export const SelectElement = SelectElementBase as SelectElementComponent

package/components/FormComponents/SliderElement.tsx

@@ -1,28 +1,41 @@
-import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import type { FormControlProps, SliderProps } from '@mui/material'
 import { FormControl, FormHelperText, FormLabel, Slider } from '@mui/material'
+import React from 'react'
+import type { FieldElementProps } from './types'
 
-export type SliderElementProps<T extends FieldValues> = Omit<SliderProps, 'control'> & {
+type AdditionalProps = {
   label?: string
   required?: boolean
   formControlProps?: FormControlProps
-} & Omit<ControllerProps<T>, 'render'>
+}
+
+export type SliderElementProps<TFieldValues extends FieldValues = FieldValues> = FieldElementProps<
+  TFieldValues,
+  Omit<SliderProps, 'name'>
+> &
+  AdditionalProps
+
+type SliderElementComponent = <TFieldValues extends FieldValues>(
+  props: SliderElementProps<TFieldValues>,
+) => React.ReactNode
+
+function SliderElementBase(props: SliderElementProps): JSX.Element {
+  const {
+    name,
+    control,
+    label,
+    rules = {},
+    required,
+    formControlProps,
+    defaultValue,
+    disabled,
+    shouldUnregister,
+    ...other
+  } = props
 
-/** @public */
-export function SliderElement<TFieldValues extends FieldValues>({
-  name,
-  control,
-  label,
-  rules = {},
-  required,
-  formControlProps,
-  defaultValue,
-  disabled,
-  shouldUnregister,
-  ...other
-}: SliderElementProps<TFieldValues>) {
   if (required && !rules.required) {
     rules.required = i18n._(/* i18n */ 'This field is required')
   }
@@ -53,3 +66,6 @@ export function SliderElement<TFieldValues extends FieldValues>({
     </FormControl>
   )
 }
+
+/** @public */
+export const SliderElement = SliderElementBase as SliderElementComponent

package/components/FormComponents/SwitchElement.tsx

@@ -1,22 +1,25 @@
-import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
-import type { FormControlLabelProps } from '@mui/material'
+import type { FormControlLabelProps, SwitchProps } from '@mui/material'
 import { FormControlLabel, Switch } from '@mui/material'
+import React from 'react'
+import type { FieldElementProps } from './types'
 
-type IProps = Omit<FormControlLabelProps, 'control'>
+type AdditionalProps = Omit<FormControlLabelProps, 'control'>
 
-export type SwitchElementProps<T extends FieldValues> = IProps & Omit<ControllerProps<T>, 'render'>
+export type SwitchElementProps<TFieldValues extends FieldValues = FieldValues> = FieldElementProps<
+  TFieldValues,
+  SwitchProps
+> &
+  AdditionalProps
+
+type SwitchElementComponent = <TFieldValues extends FieldValues>(
+  props: SwitchElementProps<TFieldValues>,
+) => React.ReactNode
+
+function SwitchElementBase(props: SwitchElementProps): JSX.Element {
+  const { name, control, defaultValue, disabled, shouldUnregister, rules, ...other } = props
 
-/** @public */
-export function SwitchElement<TFieldValues extends FieldValues>({
-  name,
-  control,
-  defaultValue,
-  disabled,
-  shouldUnregister,
-  rules,
-  ...other
-}: SwitchElementProps<TFieldValues>) {
   const { field } = useController({
     name,
     control,
@@ -28,3 +31,6 @@ export function SwitchElement<TFieldValues extends FieldValues>({
 
   return <FormControlLabel control={<Switch {...field} checked={!!field.value} />} {...other} />
 }
+
+/** @public */
+export const SwitchElement = SwitchElementBase as SwitchElementComponent

package/components/FormComponents/TextFieldElement.tsx

@@ -1,32 +1,35 @@
 /* eslint-disable no-nested-ternary */
 import { InputCheckmark } from '@graphcommerce/next-ui'
-import type { FieldValues, UseControllerProps } from '@graphcommerce/react-hook-form'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
 import { emailPattern, useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import type { TextFieldProps } from '@mui/material'
 import { TextField, useForkRef } from '@mui/material'
 import React, { useState } from 'react'
+import type { BaseControllerProps, FieldElementProps } from './types'
 
-export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<
-  TextFieldProps,
-  'name' | 'defaultValue'
-> & {
-  showValid?: boolean
-} & UseControllerProps<T>
+type ShowValidProps = { showValid?: boolean }
+
+export type TextFieldElementProps<TFieldValues extends FieldValues = FieldValues> =
+  FieldElementProps<TFieldValues, TextFieldProps> & ShowValidProps
+
+type TextFieldElementComponent = <TFieldValues extends FieldValues>(
+  props: TextFieldElementProps<TFieldValues>,
+) => React.ReactNode
 
 /** @public */
-export function TextFieldElement<TFieldValues extends FieldValues>({
-  type,
-  required,
-  name,
-  control,
-  defaultValue,
-  rules = {},
-  shouldUnregister,
-  showValid,
-  disabled,
-  ...rest
-}: TextFieldElementProps<TFieldValues>): JSX.Element {
+function TextFieldElementBase(props: TextFieldElementProps): JSX.Element {
+  const {
+    name,
+    control,
+    defaultValue,
+    rules = {},
+    shouldUnregister,
+    disabled,
+  } = props as BaseControllerProps
+  const { showValid } = props as ShowValidProps
+  const { type, required, ...rest } = props as TextFieldProps
+
   if (required && !rules.required) {
     rules.required = i18n._(/* i18n */ 'This field is required')
   }
@@ -39,7 +42,7 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
   }
 
   const {
-    field: { onChange, ref, value = '', ...field },
+    field: { onChange, ref, value = '', onBlur },
     fieldState: { error },
   } = useController({ name, control, rules, defaultValue, shouldUnregister, disabled })
 
@@ -58,7 +61,9 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
   return (
     <TextField
       {...rest}
-      {...field}
+      onBlur={onBlur}
+      name={name}
+      disabled={disabled}
       value={value}
       inputProps={{ ...rest.inputProps, onAnimationStart }}
       onChange={(ev) => {
@@ -83,3 +88,5 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
     />
   )
 }
+
+export const TextFieldElement = TextFieldElementBase as TextFieldElementComponent

package/components/FormComponents/index.ts

@@ -2,7 +2,6 @@ export * from './ActionCardListForm'
 export * from './CheckboxButtonGroup'
 export * from './CheckboxElement'
 export * from './EmailElement'
-export * from './MultiSelectElement'
 export * from './NumberFieldElement'
 export * from './PasswordElement'
 export * from './PasswordRepeatElement'

package/components/FormComponents/types.ts

@@ -0,0 +1,26 @@
+import type {
+  Control,
+  FieldPath,
+  FieldPathValue,
+  FieldValues,
+  RegisterOptions,
+} from '@graphcommerce/react-hook-form'
+
+export type BaseControllerProps<TFieldValues extends FieldValues = FieldValues> = {
+  name: FieldPath<TFieldValues>
+  control?: Control<TFieldValues>
+  rules?: Omit<
+    RegisterOptions<NoInfer<TFieldValues>, FieldPath<TFieldValues>>,
+    'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'
+  >
+  shouldUnregister?: boolean
+  defaultValue?: FieldPathValue<NoInfer<TFieldValues>, FieldPath<TFieldValues>>
+  disabled?: boolean
+}
+
+type BaseControllerPropsKeys = keyof BaseControllerProps
+
+export type FieldElementProps<
+  TFieldValues extends FieldValues,
+  BaseTypes = Record<string, unknown>,
+> = BaseControllerProps<TFieldValues> & Omit<BaseTypes, BaseControllerPropsKeys>

package/components/PreviewMode/LightTooltip.tsx

@@ -1,4 +1,4 @@
-import { Tooltip, styled, tooltipClasses } from '@mui/material'
+import { styled, Tooltip, tooltipClasses } from '@mui/material'
 
 export const LightTooltip = styled<typeof Tooltip>(({ className, ...props }) => (
   <Tooltip {...props} classes={{ popper: className }} />

package/components/PreviewMode/PreviewMode.tsx

@@ -1,20 +1,6 @@
-import type { PreviewData } from '@graphcommerce/graphql'
-import {
-  iconChevronRight,
-  iconClose,
-  iconContrast,
-  iconInfo,
-  iconRefresh,
-  IconSvg,
-  MessageSnackbar,
-} from '@graphcommerce/next-ui'
-import { FormAutoSubmit, FormPersist, FormProvider, useForm } from '@graphcommerce/react-hook-form'
-import { Box, IconButton } from '@mui/material'
 import { useRouter } from 'next/router'
-import { TextFieldElement } from '../FormComponents'
-import { LightTooltip } from './LightTooltip'
-import { PreviewModeActions } from './PreviewModeActions'
-import { PreviewModeToolbar } from './PreviewModeToolbar'
+import { PreviewModeDisabled } from './PreviewModeDisabled'
+import { PreviewModeEnabled } from './PreviewModeEnabled'
 
 function getPreviewUrl() {
   const url = new URL(window.location.href)
@@ -23,128 +9,6 @@ function getPreviewUrl() {
   return url
 }
 
-function PreviewModeEnabled() {
-  const form = useForm<{ secret: string; previewData: PreviewData }>({})
-
-  const submit = form.handleSubmit((formValues) => {
-    const url = getPreviewUrl()
-    url.searchParams.append('action', 'update')
-
-    Object.entries(formValues).forEach(([key, value]) => {
-      url.searchParams.append(key, JSON.stringify(value))
-    })
-
-    window.location.href = url.toString()
-  })
-
-  const exitHandler = form.handleSubmit(() => {
-    const url = getPreviewUrl()
-    url.searchParams.append('action', 'exit')
-
-    window.location.href = url.toString()
-  })
-
-  const revalidateHandler = form.handleSubmit((formValues) => {
-    const url = getPreviewUrl()
-    Object.entries(formValues).forEach(([key, value]) => {
-      // eslint-disable-next-line @typescript-eslint/no-base-to-string
-      url.searchParams.append(key, `${value}`)
-    })
-    url.searchParams.append('action', 'revalidate')
-    window.location.href = url.toString()
-  })
-
-  return (
-    <FormProvider {...form}>
-      <MessageSnackbar
-        variant='pill'
-        severity='warning'
-        disableBackdropClick
-        disableClose
-        open
-        icon={iconContrast}
-        onClose={() => {}}
-        action={
-          <>
-            <PreviewModeActions />
-            <LightTooltip title='Revalidate / Regenerate Page' placement='top'>
-              <IconButton color='secondary' type='submit' onClick={revalidateHandler}>
-                <IconSvg src={iconRefresh} />
-              </IconButton>
-            </LightTooltip>
-            <LightTooltip title='Stop preview mode' placement='top'>
-              <IconButton color='secondary' type='submit' onClick={exitHandler}>
-                <IconSvg src={iconClose} />
-              </IconButton>
-            </LightTooltip>
-          </>
-        }
-      >
-        <Box sx={{ display: 'grid', gridAutoFlow: 'column', placeItems: 'center', gap: 4 }}>
-          <Box sx={{ display: 'flex', placeItems: 'center' }}>
-            Preview Mode{' '}
-            <LightTooltip title='You are currently viewing the website in Preview Mode (caches are disabled).'>
-              <IconButton size='small'>
-                <IconSvg src={iconInfo} />
-              </IconButton>
-            </LightTooltip>
-          </Box>
-          <PreviewModeToolbar />
-        </Box>
-      </MessageSnackbar>
-      <FormPersist form={form} name='PreviewModePreviewData' />
-      <FormAutoSubmit control={form.control} submit={submit} />
-    </FormProvider>
-  )
-}
-
-function PreviewModeDisabled() {
-  const form = useForm<{ secret: string }>({
-    defaultValues: {
-      secret:
-        process.env.NODE_ENV === 'development'
-          ? (import.meta.graphCommerce.previewSecret ?? '')
-          : '',
-    },
-  })
-
-  const submit = form.handleSubmit((formValues) => {
-    const url = getPreviewUrl()
-    url.searchParams.append('action', 'enable')
-
-    Object.entries(formValues).forEach(([key, value]) => {
-      url.searchParams.append(key, typeof value === 'string' ? value : JSON.stringify(value))
-    })
-
-    window.location.href = url.toString()
-  })
-
-  return (
-    <FormProvider {...form}>
-      <MessageSnackbar
-        variant='pill'
-        severity='warning'
-        disableBackdropClick
-        disableClose
-        open
-        icon={iconContrast}
-        onClose={() => {}}
-        action={
-          <IconButton color='secondary' type='submit' onClick={submit}>
-            <IconSvg src={iconChevronRight} />
-          </IconButton>
-        }
-      >
-        <Box sx={{ display: 'grid', gridAutoFlow: 'column', placeItems: 'center', gap: 4 }}>
-          <Box sx={{ display: 'flex', placeItems: 'center' }}>Preview Mode</Box>
-          <TextFieldElement control={form.control} name='secret' label='Secret' />
-        </Box>
-      </MessageSnackbar>
-      <FormPersist form={form} name='PreviewModePreviewData' />
-    </FormProvider>
-  )
-}
-
 export function PreviewMode() {
   const router = useRouter()
 

package/components/PreviewMode/PreviewModeDisabled.tsx

@@ -0,0 +1,56 @@
+import { iconChevronRight, iconContrast, IconSvg, MessageSnackbar } from '@graphcommerce/next-ui'
+import { FormPersist, FormProvider, useForm } from '@graphcommerce/react-hook-form'
+import { Box, IconButton } from '@mui/material'
+import { TextFieldElement } from '../FormComponents'
+
+function getPreviewUrl() {
+  const url = new URL(window.location.href)
+  url.pathname = '/api/preview'
+  ;[...url.searchParams.entries()].forEach(([key]) => url.searchParams.delete(key))
+  return url
+}
+
+const secret =
+  process.env.NODE_ENV === 'development' ? (import.meta.graphCommerce.previewSecret ?? '') : ''
+
+type FormValues = { secret: string }
+
+export function PreviewModeDisabled() {
+  const form = useForm<FormValues>({ defaultValues: { secret } })
+
+  const submit = form.handleSubmit((formValues) => {
+    const url = getPreviewUrl()
+    url.searchParams.append('action', 'enable')
+
+    Object.entries(formValues).forEach(([key, value]) => {
+      url.searchParams.append(key, typeof value === 'string' ? value : JSON.stringify(value))
+    })
+
+    window.location.href = url.toString()
+  })
+
+  return (
+    <FormProvider<FormValues> {...form}>
+      <MessageSnackbar
+        variant='pill'
+        severity='warning'
+        disableBackdropClick
+        disableClose
+        open
+        icon={iconContrast}
+        onClose={() => {}}
+        action={
+          <IconButton color='secondary' type='submit' onClick={submit}>
+            <IconSvg src={iconChevronRight} />
+          </IconButton>
+        }
+      >
+        <Box sx={{ display: 'grid', gridAutoFlow: 'column', placeItems: 'center', gap: 4 }}>
+          <Box sx={{ display: 'flex', placeItems: 'center' }}>Preview Mode</Box>
+          <TextFieldElement control={form.control} name='secret' label='Secret' />
+        </Box>
+      </MessageSnackbar>
+      <FormPersist form={form} name='PreviewModePreviewData' />
+    </FormProvider>
+  )
+}

package/components/PreviewMode/PreviewModeEnabled.tsx

@@ -0,0 +1,98 @@
+import type { PreviewData } from '@graphcommerce/graphql'
+import {
+  iconClose,
+  iconContrast,
+  iconInfo,
+  iconRefresh,
+  IconSvg,
+  MessageSnackbar,
+} from '@graphcommerce/next-ui'
+import { FormAutoSubmit, FormPersist, FormProvider, useForm } from '@graphcommerce/react-hook-form'
+import { Box, IconButton } from '@mui/material'
+import { LightTooltip } from './LightTooltip'
+import { PreviewModeActions } from './PreviewModeActions'
+import { PreviewModeToolbar } from './PreviewModeToolbar'
+
+function getPreviewUrl() {
+  const url = new URL(window.location.href)
+  url.pathname = '/api/preview'
+  ;[...url.searchParams.entries()].forEach(([key]) => url.searchParams.delete(key))
+  return url
+}
+
+type FormValues = { secret: string; previewData: PreviewData }
+
+export function PreviewModeEnabled() {
+  const form = useForm<FormValues>({})
+
+  const submit = form.handleSubmit((formValues) => {
+    const url = getPreviewUrl()
+    url.searchParams.append('action', 'update')
+
+    Object.entries(formValues).forEach(([key, value]) => {
+      url.searchParams.append(key, JSON.stringify(value))
+    })
+
+    window.location.href = url.toString()
+  })
+
+  const exitHandler = form.handleSubmit(() => {
+    const url = getPreviewUrl()
+    url.searchParams.append('action', 'exit')
+
+    window.location.href = url.toString()
+  })
+
+  const revalidateHandler = form.handleSubmit((formValues) => {
+    const url = getPreviewUrl()
+    Object.entries(formValues).forEach(([key, value]) => {
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
+      url.searchParams.append(key, `${value}`)
+    })
+    url.searchParams.append('action', 'revalidate')
+    window.location.href = url.toString()
+  })
+
+  return (
+    <FormProvider<FormValues> {...form}>
+      <MessageSnackbar
+        variant='pill'
+        severity='warning'
+        disableBackdropClick
+        disableClose
+        open
+        icon={iconContrast}
+        onClose={() => {}}
+        action={
+          <>
+            <PreviewModeActions />
+            <LightTooltip title='Revalidate / Regenerate Page' placement='top'>
+              <IconButton color='secondary' type='submit' onClick={revalidateHandler}>
+                <IconSvg src={iconRefresh} />
+              </IconButton>
+            </LightTooltip>
+            <LightTooltip title='Stop preview mode' placement='top'>
+              <IconButton color='secondary' type='submit' onClick={exitHandler}>
+                <IconSvg src={iconClose} />
+              </IconButton>
+            </LightTooltip>
+          </>
+        }
+      >
+        <Box sx={{ display: 'grid', gridAutoFlow: 'column', placeItems: 'center', gap: 4 }}>
+          <Box sx={{ display: 'flex', placeItems: 'center' }}>
+            Preview Mode{' '}
+            <LightTooltip title='You are currently viewing the website in Preview Mode (caches are disabled).'>
+              <IconButton size='small'>
+                <IconSvg src={iconInfo} />
+              </IconButton>
+            </LightTooltip>
+          </Box>
+          <PreviewModeToolbar />
+        </Box>
+      </MessageSnackbar>
+      <FormPersist form={form} name='PreviewModePreviewData' />
+      <FormAutoSubmit control={form.control} submit={submit} />
+    </FormProvider>
+  )
+}

package/components/PreviewMode/previewModeDefaults.ts

@@ -1,5 +1,5 @@
 import type { PreviewData } from '@graphcommerce/graphql'
 
 export function previewModeDefaults(): PreviewData {
-  return {}
+  return {} as PreviewData
 }

package/package.json

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