@graphcommerce/ecommerce-ui 9.0.0-canary.98 → 9.0.0

package/Config.graphqls

@@ -4,7 +4,13 @@ enum WebsitePermissions {
   # DISABLED will be implemented later
 }
 
+"""
+Permissions input
+"""
 input GraphCommercePermissions {
+  """
+  Allows the option to require login or completely disable the site.
+  """
   website: WebsitePermissions
 }
 

package/components/ApolloError/ApolloErrorAlert.tsx

@@ -1,7 +1,7 @@
-import { ApolloError } from '@graphcommerce/graphql'
+import type { ApolloError } from '@graphcommerce/graphql'
 import { extendableComponent } from '@graphcommerce/next-ui/Styles/extendableComponent'
-import { Trans } from '@lingui/react'
-import { AlertProps, Alert, Box, SxProps, Theme } from '@mui/material'
+import type { AlertProps, SxProps, Theme } from '@mui/material'
+import { Alert, Box } from '@mui/material'
 import { maskNetworkError } from './maskNetworkError'
 
 const { classes, selectors } = extendableComponent('ApolloErrorAlert', ['root', 'alert'] as const)

package/components/ApolloError/ApolloErrorFullPage.tsx

@@ -1,7 +1,8 @@
-import { ApolloError } from '@graphcommerce/graphql'
-import { FullPageMessage, FullPageMessageProps } from '@graphcommerce/next-ui'
+import type { ApolloError } from '@graphcommerce/graphql'
+import type { FullPageMessageProps } from '@graphcommerce/next-ui'
+import { FullPageMessage } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { AlertProps } from '@mui/material'
+import type { AlertProps } from '@mui/material'
 import { ApolloErrorAlert } from './ApolloErrorAlert'
 import { maskNetworkError } from './maskNetworkError'
 

package/components/ApolloError/ApolloErrorSnackbar.tsx

@@ -1,5 +1,6 @@
-import { ApolloError } from '@graphcommerce/graphql'
-import { ErrorSnackbar, ErrorSnackbarProps } from '@graphcommerce/next-ui'
+import type { ApolloError } from '@graphcommerce/graphql'
+import type { ErrorSnackbarProps } from '@graphcommerce/next-ui'
+import { ErrorSnackbar } from '@graphcommerce/next-ui'
 import { maskNetworkError } from './maskNetworkError'
 
 export type ApolloErrorSnackbarProps = {
@@ -7,7 +8,7 @@ export type ApolloErrorSnackbarProps = {
 } & Pick<ErrorSnackbarProps, 'action' | 'onClose'>
 
 export function ApolloErrorSnackbar(props: ApolloErrorSnackbarProps) {
-  const { error, action, ...passedProps } = props
+  const { error, ...passedProps } = props
 
   if (!error) return null
 

package/components/ApolloError/maskNetworkError.tsx

@@ -1,4 +1,4 @@
-import { ServerError, ServerParseError } from '@graphcommerce/graphql'
+import type { ServerError, ServerParseError } from '@graphcommerce/graphql'
 import { Trans } from '@lingui/react'
 
 function isServerError(error: Error | ServerParseError | ServerError | null): error is ServerError {

package/components/ComposedSubmitButton/ComposedSubmitButton.tsx

@@ -1,8 +1,9 @@
-import { iconChevronRight, IconSvg, Button, ButtonProps } from '@graphcommerce/next-ui'
-import { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
+import type { ButtonProps } from '@graphcommerce/next-ui'
+import { Button, IconSvg, iconChevronRight } from '@graphcommerce/next-ui'
+import type { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
 import { forwardRef } from 'react'
 
-type ComposedSubmitButtonProps = ComposedSubmitRenderComponentProps &
+export type ComposedSubmitButtonProps = ComposedSubmitRenderComponentProps &
   Omit<ButtonProps, 'loading' | 'onSubmit'>
 
 /** Makes a ComposedSubmitRenderComponent rendered as a LinkOrButton */

package/components/ComposedSubmitButton/ComposedSubmitLinkOrButton.tsx

@@ -1,8 +1,9 @@
-import { iconChevronRight, LinkOrButton, LinkOrButtonProps, IconSvg } from '@graphcommerce/next-ui'
-import { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
+import type { LinkOrButtonProps } from '@graphcommerce/next-ui'
+import { IconSvg, LinkOrButton, iconChevronRight } from '@graphcommerce/next-ui'
+import type { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
 import { forwardRef } from 'react'
 
-type ComposedLinkOrButtonProps = ComposedSubmitRenderComponentProps &
+export type ComposedLinkOrButtonProps = ComposedSubmitRenderComponentProps &
   Omit<LinkOrButtonProps, 'loading'>
 
 /** Makes a ComposedSubmitRenderComponent rendered as a LinkOrButton */

package/components/FormComponents/ActionCardListForm.tsx

@@ -1,6 +1,9 @@
-import { ActionCardList, ActionCardListProps, ActionCardProps } from '@graphcommerce/next-ui'
-import { ControllerProps, FieldValues, useController } from '@graphcommerce/react-hook-form'
-import React, { MouseEventHandler } from 'react'
+import type { ActionCardListProps, ActionCardProps } from '@graphcommerce/next-ui'
+import { ActionCardList } from '@graphcommerce/next-ui'
+import type { ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
+import type { MouseEventHandler } from 'react'
+import React, { useCallback } from 'react'
 
 export type ActionCardItemBase = Pick<ActionCardProps, 'value'>
 
@@ -19,6 +22,7 @@ export type ActionCardListFormProps<A, F extends FieldValues = FieldValues> = Om
     render: React.FC<ActionCardItemRenderProps<A>>
   } & ActionCardRequireOptionSelection
 
+/** @public */
 export function ActionCardListForm<
   T extends ActionCardItemBase,
   F extends FieldValues = FieldValues,
@@ -40,11 +44,14 @@ export function ActionCardListForm<
   } = 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 onSelect = useCallback(
+    (itemValue: unknown, selectValues: unknown) =>
+      multiple
+        ? Array.isArray(selectValues) &&
+          selectValues.some((selectValue) => selectValue === itemValue)
+        : selectValues === itemValue,
+    [multiple],
+  )
 
   const {
     field: { onChange, value, ref },
@@ -60,6 +67,14 @@ export function ActionCardListForm<
     shouldUnregister,
   })
 
+  const handleReset = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      e.preventDefault()
+      if (!requireOptionSelection) onChange(null)
+    },
+    [onChange, requireOptionSelection],
+  )
+
   return (
     <ActionCardList
       {...other}
@@ -67,7 +82,7 @@ export function ActionCardListForm<
       required={required}
       value={value}
       ref={ref}
-      onChange={(_, incomming) => onChange(incomming)}
+      onChange={(_, incoming) => onChange(incoming)}
       error={formState.isSubmitted && !!fieldState.error}
       errorMessage={fieldState.error?.message}
     >
@@ -77,10 +92,7 @@ export function ActionCardListForm<
           key={`${item.value}`}
           value={item.value}
           selected={onSelect(item.value, value)}
-          onReset={(e) => {
-            e.preventDefault()
-            if (!requireOptionSelection) onChange(null)
-          }}
+          onReset={handleReset}
         />
       ))}
     </ActionCardList>

package/components/FormComponents/CheckboxButtonGroup.tsx

@@ -1,8 +1,9 @@
-import { useController, FieldValues, UseControllerProps } 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'
 import {
   Checkbox,
-  CheckboxProps,
   FormControl,
   FormControlLabel,
   FormGroup,
@@ -12,12 +13,14 @@ import {
 } from '@mui/material'
 
 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?: string
   valueKey?: string
+  // eslint-disable-next-line @typescript-eslint/ban-types
   onChange?: Function
   returnObject?: boolean
   disabled?: boolean
@@ -25,6 +28,7 @@ export type CheckboxButtonGroupProps<T extends FieldValues> = {
   checkboxColor?: CheckboxProps['color']
 } & UseControllerProps<T>
 
+/** @public */
 export function CheckboxButtonGroup<TFieldValues extends FieldValues>(
   props: CheckboxButtonGroupProps<TFieldValues>,
 ): JSX.Element {
@@ -62,13 +66,17 @@ 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)
     } else {
       newArray.splice(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         value.findIndex((i: any) => (returnObject ? i[valueKey] === index : i === index)),
         1,
       )
@@ -93,7 +101,7 @@ export function CheckboxButtonGroup<TFieldValues extends FieldValues>(
             )
           }
           const isChecked =
-            value.findIndex((item: any) =>
+            value.findIndex((item) =>
               returnObject ? item[valueKey] === optionKey : item === optionKey,
             ) !== -1
           return (
@@ -107,6 +115,7 @@ export function CheckboxButtonGroup<TFieldValues extends FieldValues>(
                   value={optionKey}
                   checked={isChecked}
                   disabled={disabled}
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                   onChange={() => handleChange(optionKey)}
                 />
               }

package/components/FormComponents/CheckboxElement.tsx

@@ -1,16 +1,20 @@
-import { ControllerProps, FieldValues, useController } 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 {
+  CheckboxProps,
+  FormControlLabelProps,
+  FormControlProps,
+  SxProps,
+  Theme,
+} from '@mui/material'
 import {
   Checkbox,
-  CheckboxProps,
   FormControl,
   FormControlLabel,
-  FormControlLabelProps,
-  FormControlProps,
   FormGroup,
   FormHelperText,
-  SxProps,
-  Theme,
+  useForkRef,
 } from '@mui/material'
 
 export type CheckboxElementProps<T extends FieldValues> = Omit<CheckboxProps, 'name'> & {
@@ -20,6 +24,7 @@ export type CheckboxElementProps<T extends FieldValues> = Omit<CheckboxProps, 'n
   formControl?: Omit<FormControlProps<'div'>, 'required' | 'error'>
 } & Omit<ControllerProps<T>, 'render'>
 
+/** @public */
 export function CheckboxElement<TFieldValues extends FieldValues>(
   props: CheckboxElementProps<TFieldValues>,
 ): JSX.Element {
@@ -65,7 +70,7 @@ export function CheckboxElement<TFieldValues extends FieldValues>(
             <Checkbox
               {...rest}
               {...field}
-              inputRef={ref}
+              inputRef={useForkRef(ref, rest.inputRef)}
               color={rest.color || 'primary'}
               sx={{
                 ...(Array.isArray(sx) ? sx : [sx]),

package/components/FormComponents/EmailElement.tsx

@@ -1,10 +1,13 @@
-import { emailPattern, FieldValues } from '@graphcommerce/react-hook-form'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
+import { emailPattern } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { TextFieldElement, TextFieldElementProps } from './TextFieldElement'
+import type { TextFieldElementProps } from './TextFieldElement'
+import { TextFieldElement } from './TextFieldElement'
 
 export type EmailElementProps<T extends FieldValues> = TextFieldElementProps<T>
 
+/** @public */
 export function EmailElement<TFieldValues extends FieldValues>(
   props: EmailElementProps<TFieldValues>,
 ): JSX.Element {

package/components/FormComponents/InputBaseElement.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable no-nested-ternary */
+import { FieldValues, UseControllerProps, useController } from '@graphcommerce/react-hook-form'
+import { i18n } from '@lingui/core'
+import { InputBase, InputBaseProps } from '@mui/material'
+import React from 'react'
+
+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> },
+) => JSX.Element
+
+export const InputBaseElement = React.forwardRef<
+  HTMLInputElement,
+  InputBaseElementProps<FieldValues>
+>((props: InputBaseElementProps<FieldValues>, ref: React.Ref<HTMLInputElement>): JSX.Element => {
+  const {
+    type,
+    required,
+    name,
+    control,
+    defaultValue,
+    rules = {},
+    shouldUnregister,
+    showValid,
+    disabled,
+    ...rest
+  } = props
+
+  if (required && !rules?.required) {
+    rules.required = i18n._(/* i18n */ 'This field is required')
+  }
+
+  const {
+    field,
+    fieldState: { error },
+  } = useController({ name, control, rules, defaultValue, shouldUnregister, disabled })
+
+  return (
+    <InputBase
+      {...rest}
+      {...field}
+      ref={ref}
+      required={required}
+      type={type}
+      error={Boolean(error) || rest.error}
+    />
+  )
+}) as InputBaseElementComponent

package/components/FormComponents/MultiSelectElement.tsx

@@ -1,21 +1,22 @@
 /* eslint-disable no-nested-ternary */
-import { IconSvg, iconClose } from '@graphcommerce/next-ui'
-import { FieldValues, ControllerProps, useController } from '@graphcommerce/react-hook-form'
+import { iconClose, IconSvg } 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 { FormControlProps, SelectProps } from '@mui/material'
 import {
   Checkbox,
   Chip,
   FormControl,
-  FormControlProps,
   FormHelperText,
   InputLabel,
   ListItemText,
   MenuItem,
   Select,
-  SelectProps,
 } from '@mui/material'
 
 export type MultiSelectElementProps<T extends FieldValues> = Omit<SelectProps, 'value'> & {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   options: { id: string | number; label: string }[] | any[]
   label?: string
   itemKey?: string
@@ -34,6 +35,7 @@ export type MultiSelectElementProps<T extends FieldValues> = Omit<SelectProps, '
 const ITEM_HEIGHT = 48
 const ITEM_PADDING_TOP = 8
 
+/** @public */
 export function MultiSelectElement<TFieldValues extends FieldValues>(
   props: MultiSelectElementProps<TFieldValues>,
 ): JSX.Element {
@@ -127,12 +129,14 @@ export function MultiSelectElement<TFieldValues extends FieldValues>(
             : showChips
               ? (selected) => (
                   <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+                    {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
                     {((selected as any[]) || []).map((selectedValue) => (
                       <Chip
                         key={selectedValue}
                         label={selectedValue}
                         style={{ display: 'flex', flexWrap: 'wrap' }}
                         onDelete={() => {
+                          // eslint-disable-next-line @typescript-eslint/no-explicit-any
                           onChange(value.filter((i: any) => i !== selectedValue))
                           // setValue(name, formValue.filter((i: any) => i !== value), { shouldValidate: true })
                         }}

package/components/FormComponents/NumberFieldElement.tsx

@@ -5,14 +5,11 @@ import {
   IconSvg,
   responsiveVal,
 } from '@graphcommerce/next-ui'
-import {
-  Controller,
-  ControllerProps,
-  FieldValues,
-  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 { IconButtonProps, SxProps, Theme, TextField, TextFieldProps, Fab } from '@mui/material'
+import type { IconButtonProps, SxProps, TextFieldProps, Theme } from '@mui/material'
+import { Fab, TextField, useForkRef } from '@mui/material'
 
 export type NumberFieldElementProps<T extends FieldValues = FieldValues> = Omit<
   TextFieldProps,
@@ -24,18 +21,20 @@ export type NumberFieldElementProps<T extends FieldValues = FieldValues> = Omit<
 } & Omit<ControllerProps<T>, 'render'>
 
 type OwnerState = { size?: 'small' | 'medium' }
-const componentName = 'TextInputNumber' as const
+const componentName = 'TextInputNumber'
 const parts = ['quantity', 'quantityInput', 'button'] as const
 const { withState } = extendableComponent<OwnerState, typeof componentName, typeof parts>(
   componentName,
   parts,
 )
 
+/** @public */
 export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElementProps<T>) {
   const {
     DownProps = {},
     UpProps = {},
     inputProps = {},
+    InputProps = {},
     sx = [],
     size = 'medium',
     control,
@@ -46,11 +45,18 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
     variant = 'outlined',
     disabled,
     shouldUnregister,
-    ...textFieldProps
+    ...rest
   } = props
 
   const classes = withState({ size })
 
+  let InputPropsFiltered = InputProps
+
+  if (variant === 'outlined' && 'disableUnderline' in InputPropsFiltered) {
+    const { disableUnderline, ...filteredInputProps } = InputPropsFiltered
+    InputPropsFiltered = filteredInputProps
+  }
+
   if (required && !rules.required) {
     rules.required = i18n._(/* i18n */ 'This field is required')
   }
@@ -71,22 +77,22 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
 
   return (
     <TextField
-      {...textFieldProps}
+      {...rest}
       {...field}
-      inputRef={ref}
+      inputRef={useForkRef(ref, rest.inputRef)}
       value={value ?? ''}
       onChange={(ev) => {
         const newValue = (ev.target as HTMLInputElement).valueAsNumber
         onChange(Number.isNaN(newValue) ? '' : newValue)
-        textFieldProps.onChange?.(ev)
+        rest.onChange?.(ev)
       }}
       variant={variant}
       required={required}
       error={invalid}
-      helperText={error ? error.message : textFieldProps.helperText}
+      helperText={error ? error.message : rest.helperText}
       size={size}
       type='number'
-      className={`${textFieldProps.className ?? ''} ${classes.quantity}`}
+      className={`${rest.className ?? ''} ${classes.quantity}`}
       sx={[
         {
           width: responsiveVal(90, 120),
@@ -113,7 +119,7 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
       ]}
       autoComplete='off'
       InputProps={{
-        ...textFieldProps.InputProps,
+        ...InputPropsFiltered,
         startAdornment: (
           <Fab
             aria-label={i18n._(/* i18n */ 'Decrease')}

package/components/FormComponents/PasswordElement.tsx

@@ -1,13 +1,17 @@
 import { iconEye, iconEyeCrossed, IconSvg } from '@graphcommerce/next-ui'
-import { FieldValues } from '@graphcommerce/react-hook-form'
-import { IconButton, IconButtonProps, InputAdornment } from '@mui/material'
-import { MouseEvent, useState } from 'react'
-import { TextFieldElement, TextFieldElementProps } from './TextFieldElement'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
+import type { IconButtonProps } from '@mui/material'
+import { IconButton, InputAdornment } from '@mui/material'
+import type { MouseEvent } from 'react'
+import { useState } from 'react'
+import type { TextFieldElementProps } from './TextFieldElement'
+import { TextFieldElement } from './TextFieldElement'
 
 export type PasswordElementProps<T extends FieldValues> = TextFieldElementProps<T> & {
   iconColor?: IconButtonProps['color']
 }
 
+/** @public */
 export function PasswordElement<TFieldValues extends FieldValues>(
   props: PasswordElementProps<TFieldValues>,
 ): JSX.Element {

package/components/FormComponents/PasswordRepeatElement.tsx

@@ -1,11 +1,14 @@
-import { useWatch, FieldValues } from '@graphcommerce/react-hook-form'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
+import { useWatch } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
-import { PasswordElement, PasswordElementProps } from './PasswordElement'
+import type { PasswordElementProps } from './PasswordElement'
+import { PasswordElement } from './PasswordElement'
 
 export type PasswordRepeatElementProps<T extends FieldValues> = PasswordElementProps<T> & {
   passwordFieldName: PasswordElementProps<T>['name']
 }
 
+/** @public */
 export function PasswordRepeatElement<TFieldValues extends FieldValues>({
   passwordFieldName,
   ...rest

package/components/FormComponents/RadioButtonGroup.tsx

@@ -1,4 +1,5 @@
-import { useController, FieldValues, UseControllerProps } 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 {
   FormControl,
@@ -9,9 +10,10 @@ import {
   RadioGroup,
   useTheme,
 } from '@mui/material'
-import { ChangeEvent } from 'react'
+import type { ChangeEvent } from 'react'
 
 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
@@ -20,11 +22,13 @@ export type RadioButtonGroupProps<T extends FieldValues> = {
   valueKey?: string
   type?: 'number' | 'string'
   emptyOptionLabel?: 'string'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onChange?: (value: any) => void
   returnObject?: boolean
   row?: boolean
 } & UseControllerProps<T>
 
+/** @public */
 export function RadioButtonGroup<TFieldValues extends FieldValues>(
   props: RadioButtonGroupProps<TFieldValues>,
 ): JSX.Element {
@@ -95,7 +99,7 @@ export function RadioButtonGroup<TFieldValues extends FieldValues>(
             value=''
           />
         )}
-        {options.map((option: any) => {
+        {options.map((option) => {
           const optionKey = option[valueKey]
           if (!optionKey) {
             console.error(

package/components/FormComponents/SelectElement.tsx

@@ -1,12 +1,9 @@
 import { InputCheckmark } from '@graphcommerce/next-ui'
-import {
-  Controller,
-  ControllerProps,
-  FieldValues,
-  useController,
-} 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 { MenuItem, TextField, TextFieldProps } from '@mui/material'
+import type { TextFieldProps } from '@mui/material'
+import { MenuItem, TextField, useForkRef } from '@mui/material'
 
 type OptionBase = { id: string | number; label: string | number }
 
@@ -14,23 +11,21 @@ export type SelectElementProps<T extends FieldValues, O extends OptionBase> = Om
   TextFieldProps,
   'name' | 'type' | 'onChange' | 'defaultValue'
 > & {
-  /** @deprecated Please use the rules props instead */
-  validation?: ControllerProps<T>['rules']
   options?: O[]
   type?: 'string' | 'number'
   onChange?: (value: string | number) => void
   showValid?: boolean
 } & Omit<ControllerProps<T>, 'render'>
 
+/** @public */
 export function SelectElement<TFieldValues extends FieldValues, O extends OptionBase>({
   name,
   required,
   options = [],
   type,
-  validation,
   control,
   defaultValue,
-  rules = validation ?? {},
+  rules = {},
   showValid,
   disabled,
   shouldUnregister,
@@ -66,7 +61,7 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
       {...rest}
       value={value ?? ''}
       {...field}
-      inputRef={ref}
+      inputRef={useForkRef(ref, rest.inputRef)}
       onChange={(event) => {
         let item: number | string | O | undefined = event.target.value
         if (type === 'number') item = Number(item)
@@ -87,6 +82,7 @@ export function SelectElement<TFieldValues extends FieldValues, O extends Option
           ),
       }}
     >
+      {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
       {isNativeSelect && <option />}
       {options.map((item) => (
         <ChildComponent key={item.id} value={item.id}>