koval-ui/dist/src/lib/InputText/InputText.cjs.map

React components collection with minimalistic design. Supports theming, layout, and input validation.

{"version":3,"file":"InputText.cjs","sources":["../../../../src/lib/InputText/InputText.tsx"],"sourcesContent":["import type {ChangeEvent, FC, InputHTMLAttributes} from 'react';\nimport {Fragment} from 'react';\nimport {forwardRef, useCallback} from 'react';\nimport classNames from 'classnames';\n\nimport {IconErrorOutline, IconValid, IconLoader} from '@/internal/Icons';\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport type {NativePropsTextual, CallbackPropsTextual, ValidationProps} from '@/internal/inputs';\nimport {\n    ValidationState,\n    useValidation,\n    useRevalidateOnFormChange,\n    useExternalValidation,\n} from '@/internal/inputs';\nimport {useInternalId} from '@/internal/hooks/useInternalId.ts';\nimport {useInternalRef} from '@/internal/hooks/useInternalRef.ts';\n\nimport classes from './InputText.module.css';\n\nexport type Props = DataAttributes &\n    LibraryProps &\n    NativePropsTextual &\n    CallbackPropsTextual &\n    ValidationProps & {\n        /**\n         * Define a type of TextInput. Allows a developer to optionally set one from supported\n         * text-like input types instead of default 'text'.\n         * Non-text types such as `number` or `week` aren't allowed.\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n         */\n        type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';\n        /**\n         * Define the width of the input in characters\n         */\n        size?: InputHTMLAttributes<HTMLInputElement>['size'];\n        /**\n         * Provide an icon to prepend to the input\n         */\n        prefix?: FC;\n    };\n\nexport const InputText = forwardRef<HTMLInputElement, Props>(\n    (\n        {\n            prefix: Prefix,\n            className,\n            type = 'text',\n            placeholder = '',\n            disabled,\n            value,\n            onChange = () => {},\n            onFocus = () => {},\n            onBlur = () => {},\n            onKeyDown = () => {},\n            onKeyUp = () => {},\n            defaultValue,\n            readOnly,\n            size = 16,\n            id,\n            required,\n            revalidateOnFormChange,\n            errorMessage = ValidationState.error,\n            validation,\n            displayIcon = true,\n            ...nativeProps\n        },\n        ref\n    ) => {\n        const inputRef = useInternalRef(ref);\n\n        const hasValidators =\n            Boolean(validation) ||\n            Boolean(required) ||\n            typeof nativeProps.maxLength === 'number' ||\n            typeof nativeProps.minLength === 'number' ||\n            typeof nativeProps.pattern === 'string';\n\n        const {validateTextual, validity, setValidity} = useValidation({\n            validation,\n            hasValidators,\n        });\n\n        useExternalValidation({errorMessage, inputRef, setValidity, validation});\n\n        useRevalidateOnFormChange(inputRef, validateTextual, revalidateOnFormChange);\n\n        const ValidationIcon = {\n            [ValidationState.error]: IconErrorOutline,\n            [ValidationState.valid]: IconValid,\n            [ValidationState.inProgress]: IconLoader,\n            [ValidationState.pristine]: Fragment,\n        }[validity!];\n\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                onChange(event);\n            },\n            [onChange]\n        );\n\n        const handleInvalid = useCallback(() => {\n            required && setValidity(ValidationState.error);\n        }, [required, setValidity]);\n\n        const handleSelect = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                readOnly && event.target.select();\n            },\n            [readOnly]\n        );\n\n        const inputId = useInternalId(id);\n\n        return (\n            <div\n                className={classNames(\n                    classes.wrapper,\n                    {[classes.withValidationIcon]: displayIcon},\n                    className\n                )}>\n                {Prefix && (\n                    <label className={classes.prefix} htmlFor={inputId}>\n                        <Prefix />\n                    </label>\n                )}\n                <input\n                    {...nativeProps}\n                    required={required}\n                    size={size}\n                    id={inputId}\n                    readOnly={readOnly}\n                    placeholder={placeholder}\n                    className={classes.input}\n                    ref={inputRef}\n                    disabled={disabled}\n                    type={type}\n                    value={value}\n                    defaultValue={defaultValue}\n                    onChange={handleChange}\n                    onBlur={onBlur}\n                    onFocus={onFocus}\n                    onKeyUp={onKeyUp}\n                    onKeyDown={onKeyDown}\n                    onInvalid={handleInvalid}\n                    onInput={validateTextual}\n                    onSelect={handleSelect}\n                />\n                {displayIcon && validity && <ValidationIcon className={classes.validation} />}\n            </div>\n        );\n    }\n);\n\nInputText.displayName = 'InputText';\n"],"names":["InputText","forwardRef","Prefix","className","type","placeholder","disabled","value","onChange","onFocus","onBlur","onKeyDown","onKeyUp","defaultValue","readOnly","size","id","required","revalidateOnFormChange","errorMessage","ValidationState","validation","displayIcon","nativeProps","ref","inputRef","useInternalRef","hasValidators","validateTextual","validity","setValidity","useValidation","useExternalValidation","useRevalidateOnFormChange","ValidationIcon","IconErrorOutline","IconValid","IconLoader","Fragment","handleChange","useCallback","event","handleInvalid","handleSelect","inputId","useInternalId","jsxs","classNames","classes","jsx"],"mappings":"gsBAyCaA,EAAYC,EAAA,WACrB,CACI,CACI,OAAQC,EACR,UAAAC,EACA,KAAAC,EAAO,OACP,YAAAC,EAAc,GACd,SAAAC,EACA,MAAAC,EACA,SAAAC,EAAW,IAAM,CAAC,EAClB,QAAAC,EAAU,IAAM,CAAC,EACjB,OAAAC,EAAS,IAAM,CAAC,EAChB,UAAAC,EAAY,IAAM,CAAC,EACnB,QAAAC,EAAU,IAAM,CAAC,EACjB,aAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,GACP,GAAAC,EACA,SAAAC,EACA,uBAAAC,EACA,aAAAC,EAAeC,EAAgB,gBAAA,MAC/B,WAAAC,EACA,YAAAC,EAAc,GACd,GAAGC,GAEPC,IACC,CACK,MAAAC,EAAWC,iBAAeF,CAAG,EAE7BG,EACF,EAAQN,GACR,EAAQJ,GACR,OAAOM,EAAY,WAAc,UACjC,OAAOA,EAAY,WAAc,UACjC,OAAOA,EAAY,SAAY,SAE7B,CAAC,gBAAAK,EAAiB,SAAAC,EAAU,YAAAC,CAAA,EAAeC,EAAAA,cAAc,CAC3D,WAAAV,EACA,cAAAM,CAAA,CACH,EAEDK,EAAAA,sBAAsB,CAAC,aAAAb,EAAc,SAAAM,EAAU,YAAAK,EAAa,WAAAT,EAAW,EAE7CY,4BAAAR,EAAUG,EAAiBV,CAAsB,EAE3E,MAAMgB,EAAiB,CACnB,CAACd,EAAAA,gBAAgB,KAAK,EAAGe,EAAA,iBACzB,CAACf,EAAAA,gBAAgB,KAAK,EAAGgB,EAAA,UACzB,CAAChB,EAAAA,gBAAgB,UAAU,EAAGiB,EAAA,WAC9B,CAACjB,EAAAA,gBAAgB,QAAQ,EAAGkB,EAAAA,UAC9BT,CAAS,EAELU,EAAeC,EAAA,YAChBC,GAAyC,CACtCjC,EAASiC,CAAK,CAClB,EACA,CAACjC,CAAQ,CACb,EAEMkC,EAAgBF,EAAAA,YAAY,IAAM,CACxBvB,GAAAa,EAAYV,kBAAgB,KAAK,CAAA,EAC9C,CAACH,EAAUa,CAAW,CAAC,EAEpBa,EAAeH,EAAA,YAChBC,GAAyC,CAC1B3B,GAAA2B,EAAM,OAAO,OAAO,CACpC,EACA,CAAC3B,CAAQ,CACb,EAEM8B,EAAUC,gBAAc7B,CAAE,EAG5B,OAAA8B,EAAA,KAAC,MAAA,CACG,UAAWC,EACPC,EAAAA,QAAQ,QACR,CAAC,CAACA,EAAAA,QAAQ,kBAAkB,EAAG1B,CAAW,EAC1CnB,CACJ,EACC,SAAA,CACGD,GAAA+C,EAAAA,IAAC,SAAM,UAAWD,EAAA,QAAQ,OAAQ,QAASJ,EACvC,SAACK,EAAAA,IAAA/C,EAAA,CAAA,CAAO,CACZ,CAAA,EAEJ+C,EAAA,IAAC,QAAA,CACI,GAAG1B,EACJ,SAAAN,EACA,KAAAF,EACA,GAAI6B,EACJ,SAAA9B,EACA,YAAAT,EACA,UAAW2C,EAAQ,QAAA,MACnB,IAAKvB,EACL,SAAAnB,EACA,KAAAF,EACA,MAAAG,EACA,aAAAM,EACA,SAAU0B,EACV,OAAA7B,EACA,QAAAD,EACA,QAAAG,EACA,UAAAD,EACA,UAAW+B,EACX,QAASd,EACT,SAAUe,CAAA,CACd,EACCrB,GAAeO,GAAYoB,MAACf,EAAe,CAAA,UAAWc,UAAQ,UAAY,CAAA,CAAA,CAAA,CAC/E,CAAA,CAGZ,EAEAhD,EAAU,YAAc"}