47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { cx } from 'class-variance-authority'
|
|
import {
|
|
type ForwardedRef,
|
|
forwardRef,
|
|
useId,
|
|
useImperativeHandle,
|
|
useRef,
|
|
} from 'react'
|
|
import { Input as AriaInput, Label as AriaLabel } from 'react-aria-components'
|
|
|
|
import { Label } from '../Label'
|
|
|
|
import styles from './input.module.css'
|
|
|
|
import type { InputProps } from './types'
|
|
import { Typography } from '../Typography'
|
|
|
|
export const Input = forwardRef(function AriaInputWithLabelComponent(
|
|
{ label, ...props }: InputProps,
|
|
forwardedRef: ForwardedRef<HTMLInputElement>
|
|
) {
|
|
const ref = useRef<HTMLInputElement>(null)
|
|
|
|
// Unique id is required for multiple inputs of same name appearing multiple times
|
|
// on same page. This will inherited by parent label element.
|
|
// Shouldn't really be needed if we don't set id though.
|
|
const uniqueId = useId()
|
|
const inputId = `${uniqueId}-${props.name}`
|
|
|
|
useImperativeHandle(forwardedRef, () => ref.current as HTMLInputElement)
|
|
|
|
return (
|
|
<AriaLabel className={styles.container}>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<AriaInput
|
|
{...props}
|
|
placeholder={props.placeholder}
|
|
className={cx(styles.input, props.className)}
|
|
ref={ref}
|
|
id={inputId}
|
|
/>
|
|
</Typography>
|
|
<Label required={props.required}>{label}</Label>
|
|
</AriaLabel>
|
|
)
|
|
})
|