Remove ts errors from masked input

The StyledInput was changed to a Box as input, this changed is to avoid
having to use LegacyRef that the styled function required and a
ts-ignore was added to the MixinInput, because although we are using it
just as the lib docs exemplifies the ts returns an error.

frontend/src/ui/Input/Input.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { StyledLabel, StyledInput } from './styles'
 import JoyInput from '@mui/joy/Input'
+import { Box } from '@mui/joy'
 import { SxProps } from '@mui/joy/styles/types'
 
 type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
@@ -14,10 +15,11 @@ const InnerInput = React.forwardRef<HTMLInputElement, InputProps>(function Inner
  { label, ...props },
  ref
 ) {
- const id = React.useId()
+ const reactId = React.useId()
+ const id = props.id || reactId
  return (
  <React.Fragment>
- <StyledInput {...props} ref={ref} id={id} />
+ <StyledInput id={id} ref={ref} {...props} />
  <StyledLabel htmlFor={id}>{label}</StyledLabel>
  </React.Fragment>
  )

frontend/src/ui/Input/MaskedInput.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
-import JoyInput from '@mui/joy/Input'
+import { Box, Input as JoyInput } from '@mui/joy'
 import { SxProps } from '@mui/joy/styles/types'
 import { IMaskMixin, IMaskInput } from 'react-imask'
-import { StyledLabel, StyledInput } from './styles'
+import { StyledLabel, inputStyle } from './styles'
 
 export type Mask = React.ComponentProps<typeof IMaskInput>['mask']
 
@@ -17,7 +17,7 @@ type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
 type InnerInputProps = React.InputHTMLAttributes<HTMLInputElement> & InputProps
 
 const MixinInput = IMaskMixin(({ inputRef, ...props }) => {
- return <StyledInput ref={inputRef} {...props} />
+ return <Box component="input" sx={inputStyle} ref={inputRef} {...props} />
 })
 
 const MaskedInputAdapter = React.forwardRef<HTMLElement, InnerInputProps>(function MaskedInput(
@@ -28,6 +28,8 @@ const MaskedInputAdapter = React.forwardRef<HTMLElement, InnerInputProps>(functi
 
  return (
  <>
+ {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+ {/* @ts-ignore */}
  <MixinInput {...props} inputRef={ref} id={id} onAccept={onAccept} />
  <StyledLabel htmlFor={id}>{label}</StyledLabel>
  </>

frontend/src/ui/Input/styles.tsx

@@ -1,4 +1,5 @@
 import { styled } from '@mui/joy/styles'
+import { SxProps } from '@mui/joy/styles/types'
 
 export const StyledLabel = styled('label')(({ theme }) => ({
  position: 'absolute',
@@ -9,7 +10,7 @@ export const StyledLabel = styled('label')(({ theme }) => ({
  transition: 'all 150ms cubic-bezier(0.4, 0, 0.2, 1)'
 }))
 
-export const StyledInput = styled('input')({
+export const inputStyle: SxProps = {
  border: 'none', // remove the native input border
  minWidth: 0, // remove the native input width
  outline: 0, // remove the native input outline
@@ -47,4 +48,6 @@ export const StyledInput = styled('input')({
  borderTopLeftRadius: 'calc(var(--Input-radius) - var(--variant-borderWidth, 0px))',
  borderBottomLeftRadius: 'calc(var(--Input-radius) - var(--variant-borderWidth, 0px))'
  }
-})
+}
+
+export const StyledInput = styled('input')(inputStyle)