import { ElementType , forwardRef , ReactElement , ReactNode } from 'react' ; import { Box , PolymorphicComponentProps } from '../../../helpers/react-polymorphic-box' ; import Icon from '../../icon/Icon' ; import { classnames , generateUID } from '../../../helpers' ; import { useInstance } from '../../../hooks' ; import Input from '../input/Input' ; type NodeOrBoolean = ReactNode | boolean ; export interface InputFieldOwnProps { label ? : ReactNode ; hint ? : ReactNode ; assistiveText ? : ReactNode ; disabled ? : boolean ; bigger ? : boolean ; id ? : string ; error ? : NodeOrBoolean ; warning ? : NodeOrBoolean ; rootClassName ? : string ; labelContainerClassName ? : string ; assistContainerClassName ? : string ; } export type InputFieldProps < E extends ElementType > = PolymorphicComponentProps < E , InputFieldOwnProps > ; const defaultElement = Input ; export const InputField = forwardRef ( < E extends ElementType = typeof defaultElement > ( { label , hint , assistiveText , disabled , bigger , error , id : idProp , rootClassName , labelContainerClassName , assistContainerClassName , warning , ... rest } , ref ) => { const id = useInstance ( ( ) => idProp || generateUID ( ) ) ; const assistiveUid = useInstance ( ( ) => generateUID ( ) ) ; const classes = { root : classnames ( [ 'inputform-container w100' , rootClassName , disabled && 'inputform-container--disabled' , Boolean ( error ) && 'inputform-container--invalid' , ! error && Boolean ( warning ) && 'inputform-container--warning' , bigger && 'inputform-container--bigger' , ] ) , labelContainer : classnames ( [ 'flex inputform-label flex-justify-space-between flex-nowrap flex-align-items-end' , labelContainerClassName , ] ) , inputContainer : 'inputform-field-container relative' , assistContainer : classnames ( [ 'inputform-assist flex flex-nowrap' , assistContainerClassName ] ) , } ; const hintElement = hint && < div className = "inputform-label-hint flex-item-noshrink" > { hint } < /div>; const labelElement = label && < span className = "inputform-label-text" > { label } < /span>; const errorElement = error && typeof error !== 'boolean' && ( < > < Icon name = "circle-exclamation-filled" className = "aligntop mr0-25" / > < span > { error } < /span> < />); const warningElement = warning && typeof warning !== 'boolean' && ( < > < Icon name = "circle-exclamation-filled" className = "aligntop mr0-25" / > < span > { warning } < /span> < />); return ( < label className = { classes . root } htmlFor = { id } > { ( label || hint ) && ( < div className = { classes . labelContainer } > { labelElement } { hintElement } < /div>)} < div className = { classes . inputContainer } > < Box as = { defaultElement } ref = { ref } id = { id } error = { error } disabled = { disabled } aria - describedby = { assistiveUid } { ... rest } /> < /div> < div className = { classes . assistContainer } id = { assistiveUid } > { errorElement || warningElement || ( ! error && ! warning && assistiveText ) } < /div> < /label>); } ) ; export default InputField ;