c65091b36a
feat(SW-3644): Storybook v10 * Auto update to Storybook v10 * Add scandic theme and logo * Update yarn.lock * Update formatting of package.json * Update vitest config and playwright plugin * Remove vitest 4 update * Re-added comment * Update the Typography component to explicitly return React.ReactNode * Add an explicit type assertion to the export * Add an explicit type assertion to the export for Checkbox * Explicit return type assertion * Add an explicit type assertion to the export * Update @types/react and fix ts warnings * Updated typings Approved-by: Linus Flood Approved-by: Matilda Landström
51 lines
1.4 KiB
TypeScript
51 lines
1.4 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'
|
|
|
|
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>
|
|
<Label required={props.required}>{label}</Label>
|
|
</AriaLabel>
|
|
)
|
|
})
|
|
|
|
export const Input = InputComponent as React.ForwardRefExoticComponent<
|
|
InputProps & React.RefAttributes<HTMLInputElement>
|
|
>
|