edca33c49f
feat: (SW-3655) new Input and FormInput components * First version new Input and FormInput components * Handle aria-describedby with react-aria instead of manually add it * Update breaking unit and stories tests * Merge branch 'master' into feat/SW-3655-input-component * Update example form * Merge branch 'master' into feat/SW-3655-input-component * New lock file Approved-by: Linus Flood
51 lines
1.5 KiB
TypeScript
51 lines
1.5 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 { InputLabel } from '../InputLabel'
|
|
|
|
import styles from './input.module.css'
|
|
|
|
import type { InputProps } from './types'
|
|
import { Typography } from '../Typography'
|
|
|
|
const InputComponent = 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>
|
|
<InputLabel required={props.required}>{label}</InputLabel>
|
|
</AriaLabel>
|
|
)
|
|
})
|
|
|
|
export const Input = InputComponent as React.ForwardRefExoticComponent<
|
|
InputProps & React.RefAttributes<HTMLInputElement>
|
|
>
|