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

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

{"version":3,"file":"Textarea.cjs","sources":["../../../../src/lib/Textarea/Textarea.tsx"],"sourcesContent":["import type {ChangeEvent, FC, TextareaHTMLAttributes} from 'react';\nimport {forwardRef, useCallback, useMemo} from 'react';\nimport classNames from 'classnames';\nimport {useLocalTheme} from 'css-vars-hook';\n\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport type {NativePropsTextual, CallbackPropsTextual, ValidationProps} from '@/internal/inputs';\nimport {useExternalValidation} from '@/internal/inputs';\nimport {useRevalidateOnFormChange} from '@/internal/inputs';\nimport {ValidationState, useValidationIcon, useValidation} from '@/internal/inputs';\nimport {useInternalId} from '@/internal/hooks/useInternalId.ts';\nimport {useInternalRef} from '@/internal/hooks/useInternalRef.ts';\n\nimport classes from './Textarea.module.css';\n\nexport type Props = DataAttributes &\n    LibraryProps &\n    Omit<NativePropsTextual, 'inputMode' | 'pattern' | 'size'> &\n    CallbackPropsTextual<HTMLTextAreaElement> &\n    ValidationProps & {\n        prefix?: FC;\n        /**\n         * The visible width of the text control, in average character widths.\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols\n         */\n        cols?: TextareaHTMLAttributes<HTMLTextAreaElement>['cols'];\n        /**\n         * The number of visible text lines for the control.\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows\n         */\n        rows?: TextareaHTMLAttributes<HTMLTextAreaElement>['rows'];\n        /**\n         * Specifies whether the Textarea is subject to spell checking by the underlying browser/OS.\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#spellcheck\n         */\n        spellCheck?: TextareaHTMLAttributes<HTMLTextAreaElement>['spellCheck'];\n        /**\n         * Indicates how the control should wrap the value for form submission.\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap\n         */\n        wrap?: TextareaHTMLAttributes<HTMLTextAreaElement>['wrap'];\n        /**\n         * Set Textarea resizing behavior.\n         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/resize\n         */\n        resize?: 'horizontal' | 'vertical' | 'both' | 'none';\n    };\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, Props>(\n    (\n        {\n            prefix: Prefix,\n            className,\n            placeholder = '',\n            disabled,\n            value,\n            onChange = () => {},\n            onFocus = () => {},\n            onBlur = () => {},\n            onKeyDown = () => {},\n            onKeyUp = () => {},\n            defaultValue,\n            id,\n            readOnly,\n            cols = 20,\n            rows = 3,\n            resize = 'both',\n            revalidateOnFormChange,\n            validation,\n            errorMessage,\n            displayIcon = true,\n            ...nativeProps\n        },\n        ref\n    ) => {\n        const hasValidators =\n            Boolean(validation) ||\n            Boolean(nativeProps.required) ||\n            typeof nativeProps.maxLength === 'number' ||\n            typeof nativeProps.minLength === 'number';\n\n        const {validateTextual, validity, setValidity} = useValidation({validation, hasValidators});\n\n        const inputRef = useInternalRef(ref);\n        useRevalidateOnFormChange(inputRef, validateTextual, revalidateOnFormChange);\n        useExternalValidation({errorMessage, inputRef, setValidity, validation});\n\n        const ValidationIcon = useValidationIcon(validity);\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLTextAreaElement>) => {\n                onChange(event);\n            },\n            [onChange]\n        );\n\n        const handleInvalid = useCallback(() => {\n            setValidity(ValidationState.error);\n        }, [setValidity]);\n\n        const handleInput = useCallback(\n            (event: ChangeEvent<HTMLTextAreaElement>) => {\n                validateTextual(event);\n            },\n            [validateTextual]\n        );\n\n        const handleSelect = useCallback(\n            (event: ChangeEvent<HTMLTextAreaElement>) => {\n                readOnly && event.target.select();\n            },\n            [readOnly]\n        );\n\n        const textareaId = useInternalId(id);\n\n        const {LocalRoot} = useLocalTheme();\n\n        const theme = useMemo(\n            () => ({\n                resize,\n            }),\n            [resize]\n        );\n\n        return (\n            <LocalRoot theme={theme} className={classNames(classes.wrapper, className)}>\n                {Prefix && (\n                    <label className={classes.prefix} htmlFor={textareaId}>\n                        <Prefix />\n                    </label>\n                )}\n                <textarea\n                    {...nativeProps}\n                    cols={cols}\n                    rows={rows}\n                    readOnly={readOnly}\n                    id={textareaId}\n                    placeholder={placeholder}\n                    className={classes.textarea}\n                    ref={inputRef}\n                    disabled={disabled}\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={handleInput}\n                    onSelect={handleSelect}\n                />\n                {displayIcon && validity && <ValidationIcon className={classes.validation} />}\n            </LocalRoot>\n        );\n    }\n);\n\nTextarea.displayName = 'Textarea';\n"],"names":["Textarea","forwardRef","Prefix","className","placeholder","disabled","value","onChange","onFocus","onBlur","onKeyDown","onKeyUp","defaultValue","id","readOnly","cols","rows","resize","revalidateOnFormChange","validation","errorMessage","displayIcon","nativeProps","ref","hasValidators","validateTextual","validity","setValidity","useValidation","inputRef","useInternalRef","useRevalidateOnFormChange","useExternalValidation","ValidationIcon","useValidationIcon","handleChange","useCallback","event","handleInvalid","ValidationState","handleInput","handleSelect","textareaId","useInternalId","LocalRoot","useLocalTheme","theme","useMemo","jsxs","classNames","classes","jsx"],"mappings":"2nBAgDaA,EAAWC,EAAA,WACpB,CACI,CACI,OAAQC,EACR,UAAAC,EACA,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,GAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,GACP,KAAAC,EAAO,EACP,OAAAC,EAAS,OACT,uBAAAC,EACA,WAAAC,EACA,aAAAC,EACA,YAAAC,EAAc,GACd,GAAGC,GAEPC,IACC,CACD,MAAMC,EACF,EAAQL,GACR,EAAQG,EAAY,UACpB,OAAOA,EAAY,WAAc,UACjC,OAAOA,EAAY,WAAc,SAE/B,CAAC,gBAAAG,EAAiB,SAAAC,EAAU,YAAAC,CAAA,EAAeC,EAAAA,cAAc,CAAC,WAAAT,EAAY,cAAAK,EAAc,EAEpFK,EAAWC,iBAAeP,CAAG,EACTQ,4BAAAF,EAAUJ,EAAiBP,CAAsB,EAC3Ec,EAAAA,sBAAsB,CAAC,aAAAZ,EAAc,SAAAS,EAAU,YAAAF,EAAa,WAAAR,EAAW,EAEjE,MAAAc,EAAiBC,oBAAkBR,CAAQ,EAC3CS,EAAeC,EAAA,YAChBC,GAA4C,CACzC9B,EAAS8B,CAAK,CAClB,EACA,CAAC9B,CAAQ,CACb,EAEM+B,EAAgBF,EAAAA,YAAY,IAAM,CACpCT,EAAYY,kBAAgB,KAAK,CAAA,EAClC,CAACZ,CAAW,CAAC,EAEVa,EAAcJ,EAAA,YACfC,GAA4C,CACzCZ,EAAgBY,CAAK,CACzB,EACA,CAACZ,CAAe,CACpB,EAEMgB,EAAeL,EAAA,YAChBC,GAA4C,CAC7BvB,GAAAuB,EAAM,OAAO,OAAO,CACpC,EACA,CAACvB,CAAQ,CACb,EAEM4B,EAAaC,gBAAc9B,CAAE,EAE7B,CAAC,UAAA+B,CAAS,EAAIC,gBAAc,EAE5BC,EAAQC,EAAA,QACV,KAAO,CACH,OAAA9B,CAAA,GAEJ,CAACA,CAAM,CACX,EAGI,OAAA+B,OAACJ,GAAU,MAAAE,EAAc,UAAWG,EAAWC,EAAAA,QAAQ,QAAS/C,CAAS,EACpE,SAAA,CACGD,GAAAiD,EAAAA,IAAC,SAAM,UAAWD,EAAA,QAAQ,OAAQ,QAASR,EACvC,SAACS,EAAAA,IAAAjD,EAAA,CAAA,CAAO,CACZ,CAAA,EAEJiD,EAAA,IAAC,WAAA,CACI,GAAG7B,EACJ,KAAAP,EACA,KAAAC,EACA,SAAAF,EACA,GAAI4B,EACJ,YAAAtC,EACA,UAAW8C,EAAQ,QAAA,SACnB,IAAKrB,EACL,SAAAxB,EACA,MAAAC,EACA,aAAAM,EACA,SAAUuB,EACV,OAAA1B,EACA,QAAAD,EACA,QAAAG,EACA,UAAAD,EACA,UAAW4B,EACX,QAASE,EACT,SAAUC,CAAA,CACd,EACCpB,GAAeK,GAAYyB,MAAClB,EAAe,CAAA,UAAWiB,UAAQ,UAAY,CAAA,CAAA,EAC/E,CAAA,CAGZ,EAEAlD,EAAS,YAAc"}