@graphcommerce/ecommerce-ui 9.0.0-canary.100 → 9.0.0-canary.103

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 = {

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,5 +1,6 @@
-import { iconChevronRight, IconSvg, Button, ButtonProps } from '@graphcommerce/next-ui'
-import { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
+import type { ButtonProps } from '@graphcommerce/next-ui'
+import { iconChevronRight, IconSvg, Button } from '@graphcommerce/next-ui'
+import type { ComposedSubmitRenderComponentProps } from '@graphcommerce/react-hook-form'
 import { forwardRef } from 'react'
 
 type ComposedSubmitButtonProps = ComposedSubmitRenderComponentProps &

package/components/ComposedSubmitButton/ComposedSubmitLinkOrButton.tsx

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

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'>
 
@@ -40,11 +43,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 +66,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 +81,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 +91,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/AutoCompleteElement.tsx

@@ -1,19 +1,9 @@
 /* eslint-disable @typescript-eslint/no-restricted-imports */
-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 {
-  Autocomplete,
-  AutocompleteProps,
-  Checkbox,
-  TextField,
-  TextFieldProps,
-  CircularProgress,
-} from '@mui/material'
+import type { AutocompleteProps, TextFieldProps } from '@mui/material'
+import { Autocomplete, Checkbox, TextField, CircularProgress } from '@mui/material'
 
 export type AutocompleteElementProps<
   F extends FieldValues,
@@ -29,6 +19,7 @@ export type AutocompleteElementProps<
   label?: TextFieldProps['label']
   showCheckbox?: boolean
   autocompleteProps?: Omit<
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     AutocompleteProps<T, M, D, any>,
     'name' | 'options' | 'loading' | 'renderInput'
   >
@@ -58,6 +49,7 @@ export function AutocompleteElement<TFieldValues extends FieldValues>({
   shouldUnregister,
 }: AutocompleteElementProps<
   TFieldValues,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   AutoDefault | string | any,
   boolean | undefined,
   boolean | undefined
@@ -85,7 +77,8 @@ export function AutocompleteElement<TFieldValues extends FieldValues>({
   let currentValue = multiple ? value || [] : value || null
   if (matchId) {
     currentValue = multiple
-      ? values.map((i: any) => options.find((j) => (j.id || j) === i))
+      ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        values.map((i: any) => options.find((j) => (j.id || j) === i))
       : options.find((i) => (i.id || i) === value) || null
   }
 

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
@@ -62,13 +65,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 +100,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 +114,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,17 +1,14 @@
-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 {
-  Checkbox,
+import type {
   CheckboxProps,
-  FormControl,
-  FormControlLabel,
   FormControlLabelProps,
   FormControlProps,
-  FormGroup,
-  FormHelperText,
   SxProps,
   Theme,
 } from '@mui/material'
+import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText } from '@mui/material'
 
 export type CheckboxElementProps<T extends FieldValues> = Omit<CheckboxProps, 'name'> & {
   label?: FormControlLabelProps['label']

package/components/FormComponents/EmailElement.tsx

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

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 type { FieldValues, ControllerProps } 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
@@ -127,12 +128,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, Theme, TextFieldProps } from '@mui/material'
+import { TextField, Fab } from '@mui/material'
 
 export type NumberFieldElementProps<T extends FieldValues = FieldValues> = Omit<
   TextFieldProps,
@@ -24,7 +21,7 @@ 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,
@@ -36,6 +33,7 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
     DownProps = {},
     UpProps = {},
     inputProps = {},
+    InputProps = {},
     sx = [],
     size = 'medium',
     control,
@@ -113,7 +111,7 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
       ]}
       autoComplete='off'
       InputProps={{
-        ...textFieldProps.InputProps,
+        ...InputProps,
         startAdornment: (
           <Fab
             aria-label={i18n._(/* i18n */ 'Decrease')}

package/components/FormComponents/PasswordElement.tsx

@@ -1,8 +1,11 @@
 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']

package/components/FormComponents/PasswordRepeatElement.tsx

@@ -1,6 +1,8 @@
-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']

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,6 +22,7 @@ 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
@@ -95,7 +98,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 } from '@mui/material'
 
 type OptionBase = { id: string | number; label: string | number }
 
@@ -87,6 +84,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}>

package/components/FormComponents/SliderElement.tsx

@@ -1,18 +1,8 @@
-import {
-  ControllerProps,
-  FieldError,
-  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 {
-  FormControl,
-  FormControlProps,
-  FormHelperText,
-  FormLabel,
-  Slider,
-  SliderProps,
-} from '@mui/material'
+import type { FormControlProps, SliderProps } from '@mui/material'
+import { FormControl, FormHelperText, FormLabel, Slider } from '@mui/material'
 
 export type SliderElementProps<T extends FieldValues> = Omit<SliderProps, 'control'> & {
   label?: string

package/components/FormComponents/SwitchElement.tsx

@@ -1,5 +1,7 @@
-import { FieldValues, ControllerProps, useController } from '@graphcommerce/react-hook-form'
-import { FormControlLabel, FormControlLabelProps, Switch } from '@mui/material'
+import type { FieldValues, ControllerProps } from '@graphcommerce/react-hook-form'
+import { useController } from '@graphcommerce/react-hook-form'
+import type { FormControlLabelProps } from '@mui/material'
+import { FormControlLabel, Switch } from '@mui/material'
 
 type IProps = Omit<FormControlLabelProps, 'control'>
 

package/components/FormComponents/TelephoneElement.tsx

@@ -1,6 +1,8 @@
-import { FieldValues, phonePattern } from '@graphcommerce/react-hook-form'
+import type { FieldValues } from '@graphcommerce/react-hook-form'
+import { phonePattern } from '@graphcommerce/react-hook-form'
 import { Trans, t } from '@lingui/macro'
-import { TextFieldElement, TextFieldElementProps } from './TextFieldElement'
+import type { TextFieldElementProps } from './TextFieldElement'
+import { TextFieldElement } from './TextFieldElement'
 
 export type TelephoneElementProps<T extends FieldValues> = TextFieldElementProps<T>
 

package/components/FormComponents/TextFieldElement.tsx

@@ -1,13 +1,11 @@
 /* eslint-disable no-nested-ternary */
 import { InputCheckmark } from '@graphcommerce/next-ui'
-import {
-  FieldValues,
-  UseControllerProps,
-  emailPattern,
-  useController,
-} 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 { TextField, TextFieldProps } from '@mui/material'
+import type { TextFieldProps } from '@mui/material'
+import { TextField } from '@mui/material'
+import React, { useState } from 'react'
 
 export type TextFieldElementProps<T extends FieldValues = FieldValues> = Omit<
   TextFieldProps,
@@ -48,11 +46,24 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
     fieldState: { error },
   } = useController({ name, control, rules, defaultValue, shouldUnregister, disabled })
 
+  // https://stackoverflow.com/questions/76830737/chrome-autofill-causes-textbox-collision-for-textfield-label-and-value
+  const [hasAutofill, setHasAutofill] = useState(false)
+  const shrink = hasAutofill || rest.InputLabelProps?.shrink || Boolean(value)
+  const onAnimationStart = (e: React.AnimationEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    if (e.target instanceof HTMLElement) {
+      const autofilled = !!e.target.matches('*:-webkit-autofill')
+      if (e.animationName === 'mui-auto-fill') setHasAutofill(autofilled)
+      if (e.animationName === 'mui-auto-fill-cancel') setHasAutofill(autofilled)
+    }
+    return rest.inputProps?.onAnimationStart?.(e)
+  }
+
   return (
     <TextField
       {...rest}
       {...field}
       value={value}
+      inputProps={{ ...rest.inputProps, onAnimationStart }}
       onChange={(ev) => {
         onChange(type === 'number' && ev.target.value ? Number(ev.target.value) : ev.target.value)
         rest.onChange?.(ev)
@@ -62,6 +73,7 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
       type={type}
       error={Boolean(error) || rest.error}
       helperText={error ? error.message : rest.helperText}
+      InputLabelProps={{ ...rest.InputLabelProps, shrink }}
       InputProps={{
         ...rest.InputProps,
         endAdornment:

package/components/FormComponents/ToggleButtonGroup.tsx

@@ -1,21 +1,15 @@
-import {
-  ControllerProps,
-  FieldError,
-  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 { FormLabelProps, ToggleButtonGroupProps, ToggleButtonProps } from '@mui/material'
 import {
   FormControl,
   FormHelperText,
   FormLabel,
-  FormLabelProps,
   ToggleButton,
   ToggleButtonGroup,
-  ToggleButtonGroupProps,
-  ToggleButtonProps,
 } from '@mui/material'
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 type SingleToggleButtonProps = Omit<ToggleButtonProps, 'value' | 'children'> & {
   id: number | string
@@ -87,9 +81,9 @@ export function ToggleButtonGroupElement<TFieldValues extends FieldValues = Fiel
           }
         }}
       >
-        {options.map(({ label, id, ...toggleProps }) => (
+        {options.map(({ label: labelVal, id, ...toggleProps }) => (
           <ToggleButton value={id} {...toggleProps} key={id}>
-            {label}
+            {labelVal}
           </ToggleButton>
         ))}
       </ToggleButtonGroup>