@graphcommerce/ecommerce-ui 9.0.4-canary.8 → 9.0.4

package/CHANGELOG.md

@@ -1,30 +1,18 @@
 # @graphcommerce/ecommerce-ui
 
-## 9.0.4-canary.8
+## 9.0.4
 
-## 9.0.4-canary.7
+## 9.0.3
 
-## 9.0.4-canary.6
+## 9.0.3-canary.0
 
-## 9.0.4-canary.5
+## 9.0.2
 
-## 9.0.4-canary.4
+## 9.0.2-canary.0
 
-### Patch Changes
-
-- [`026114e`](https://github.com/graphcommerce-org/graphcommerce/commit/026114ece325d8f675ba8820c6b63345e48532fa) - Sovle issue where showValid would be forwarded to the textField element ([@paales](https://github.com/paales))
-
-## 9.0.4-canary.3
-
-## 9.0.4-canary.2
-
-## 9.0.4-canary.1
-
-### Patch Changes
-
-- [#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
 
-## 9.0.4-canary.0
+## 9.0.1-canary.1
 
 ## 9.0.0
 

package/components/ComposedSubmitButton/ComposedSubmitButton.tsx

@@ -1,5 +1,5 @@
 import type { ButtonProps } from '@graphcommerce/next-ui'
-import { Button, iconChevronRight, IconSvg } from '@graphcommerce/next-ui'
+import { Button, IconSvg, iconChevronRight } 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 { iconChevronRight, IconSvg, LinkOrButton } from '@graphcommerce/next-ui'
+import { IconSvg, LinkOrButton, iconChevronRight } 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 } from '@graphcommerce/react-hook-form'
+import type { FieldValues, UseControllerProps } from '@graphcommerce/react-hook-form'
 import { useController } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import type { CheckboxProps } from '@mui/material'
@@ -11,33 +11,27 @@ import {
   FormLabel,
   useTheme,
 } from '@mui/material'
-import type { BaseControllerProps } from './types'
 
-type OptionBase = { id: string | number; label: string | number }
-
-type AdditionalProps<TOption extends OptionBase = OptionBase> = {
-  options: TOption[]
+export type CheckboxButtonGroupProps<T extends FieldValues> = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  options: { id: string | number; label: string }[] | any[]
   helperText?: string
   required?: boolean
   label?: string
-  labelKey?: keyof TOption
-  valueKey?: keyof TOption
-  onChange?: (value: (string | number)[]) => void
+  labelKey?: string
+  valueKey?: string
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  onChange?: Function
+  returnObject?: boolean
   disabled?: boolean
   row?: boolean
   checkboxColor?: CheckboxProps['color']
-}
-
-export type CheckboxButtonGroupProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TOption extends OptionBase = OptionBase,
-> = BaseControllerProps<TFieldValues> & AdditionalProps<TOption>
+} & UseControllerProps<T>
 
-type CheckboxButtonGroupComponent = <TFieldValues extends FieldValues>(
+/** @public */
+export function CheckboxButtonGroup<TFieldValues extends FieldValues>(
   props: CheckboxButtonGroupProps<TFieldValues>,
-) => React.ReactNode
-
-function CheckboxButtonGroupBase(props: CheckboxButtonGroupProps) {
+): JSX.Element {
   const {
     helperText,
     options,
@@ -46,6 +40,7 @@ function CheckboxButtonGroupBase(props: CheckboxButtonGroupProps) {
     required,
     labelKey = 'label',
     valueKey = 'id',
+    returnObject,
     disabled,
     row,
     control,
@@ -70,37 +65,57 @@ function CheckboxButtonGroupBase(props: CheckboxButtonGroupProps) {
 
   const parsedHelperText = error ? error.message : helperText
 
-  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)
+  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)
     } else {
-      newArray.splice(index, 1)
+      newArray.splice(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        value.findIndex((i: any) => (returnObject ? i[valueKey] === index : i === index)),
+        1,
+      )
     }
-
+    // setValue(name, newArray, { shouldValidate: true })
     onChange(newArray)
-    rest.onChange?.(newArray)
+    if (typeof rest.onChange === 'function') {
+      rest.onChange(newArray)
+    }
   }
 
   return (
     <FormControl error={invalid} required={required}>
       {label && <FormLabel error={invalid}>{label}</FormLabel>}
       <FormGroup row={row}>
-        {options.map((option) => {
+        {options.map((option: any) => {
           const optionKey = option[valueKey]
-          const isChecked = (value as (string | number)[]).includes(optionKey)
+          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
           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)}
                 />
               }
@@ -114,6 +129,3 @@ function CheckboxButtonGroupBase(props: CheckboxButtonGroupProps) {
     </FormControl>
   )
 }
-
-/** @public */
-export const CheckboxButtonGroup = CheckboxButtonGroupBase as CheckboxButtonGroupComponent

package/components/FormComponents/CheckboxElement.tsx

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

package/components/FormComponents/InputBaseElement.tsx

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

package/components/FormComponents/NumberFieldElement.tsx

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

package/components/FormComponents/RadioButtonGroup.tsx

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

package/components/FormComponents/SelectElement.tsx

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

package/components/FormComponents/SliderElement.tsx

@@ -1,41 +1,28 @@
-import type { FieldValues } from '@graphcommerce/react-hook-form'
+import type { ControllerProps, 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'
 
-type AdditionalProps = {
+export type SliderElementProps<T extends FieldValues> = Omit<SliderProps, 'control'> & {
   label?: string
   required?: boolean
   formControlProps?: FormControlProps
-}
-
-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
+} & Omit<ControllerProps<T>, 'render'>
 
+/** @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')
   }
@@ -66,6 +53,3 @@ function SliderElementBase(props: SliderElementProps): JSX.Element {
     </FormControl>
   )
 }
-
-/** @public */
-export const SliderElement = SliderElementBase as SliderElementComponent

package/components/FormComponents/SwitchElement.tsx

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

package/components/FormComponents/TextFieldElement.tsx

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

package/components/FormComponents/index.ts

@@ -2,6 +2,7 @@ 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/PreviewMode/LightTooltip.tsx

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

package/components/PreviewMode/PreviewMode.tsx

@@ -1,6 +1,20 @@
+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 { PreviewModeDisabled } from './PreviewModeDisabled'
-import { PreviewModeEnabled } from './PreviewModeEnabled'
+import { TextFieldElement } from '../FormComponents'
+import { LightTooltip } from './LightTooltip'
+import { PreviewModeActions } from './PreviewModeActions'
+import { PreviewModeToolbar } from './PreviewModeToolbar'
 
 function getPreviewUrl() {
   const url = new URL(window.location.href)
@@ -9,6 +23,128 @@ 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/previewModeDefaults.ts

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

package/package.json

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

package/components/FormComponents/types.ts

@@ -1,26 +0,0 @@
-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/PreviewModeDisabled.tsx

@@ -1,56 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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>
-  )
-}