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

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

{"version":3,"file":"InputPassword.cjs","sources":["../../../../src/lib/InputPassword/InputPassword.tsx"],"sourcesContent":["import type {ChangeEvent} from 'react';\nimport {useMemo} from 'react';\nimport {useState} from 'react';\nimport {forwardRef, useCallback} from 'react';\nimport classNames from 'classnames';\n\nimport {IconLock, IconLockOpen} from '@/internal/Icons';\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport type {NativePropsTextual, CallbackPropsTextual, ValidationProps} from '@/internal/inputs';\nimport {\n    ValidationState,\n    useValidationIcon,\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 './InputPassword.module.css';\n\nexport type Props = DataAttributes &\n    LibraryProps &\n    NativePropsTextual &\n    CallbackPropsTextual &\n    ValidationProps;\n\nenum InputType {\n    password = 'password',\n    text = 'text',\n}\n\nexport const InputPassword = forwardRef<HTMLInputElement, Props>(\n    (\n        {\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            size = 16,\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            typeof nativeProps.pattern === 'string';\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<HTMLInputElement>) => {\n                onChange(event);\n            },\n            [onChange]\n        );\n\n        const handleInvalid = useCallback(() => {\n            setValidity(ValidationState.error);\n        }, [setValidity]);\n\n        const inputId = useInternalId(id);\n\n        const handleSelect = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                readOnly && event.target.select();\n            },\n            [readOnly]\n        );\n\n        const [type, setType] = useState<keyof typeof InputType>(InputType.password);\n\n        const Icon = useMemo(\n            () =>\n                ({\n                    [InputType.text]: IconLockOpen,\n                    [InputType.password]: IconLock,\n                })[type],\n            [type]\n        );\n\n        const handleIconClick = useCallback(() => {\n            type === InputType.password && setType(InputType.text);\n            type === InputType.text && setType(InputType.password);\n        }, [type, setType]);\n\n        return (\n            <div\n                className={classNames(\n                    classes.wrapper,\n                    {[classes.withValidationIcon]: displayIcon},\n                    className\n                )}>\n                <label\n                    tabIndex={-1}\n                    onClick={handleIconClick}\n                    className={classes.prefix}\n                    htmlFor={inputId}>\n                    <Icon />\n                </label>\n                <input\n                    {...nativeProps}\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 />}\n            </div>\n        );\n    }\n);\n\nInputPassword.displayName = 'InputPassword';\n"],"names":["InputPassword","forwardRef","className","placeholder","disabled","value","onChange","onFocus","onBlur","onKeyDown","onKeyUp","defaultValue","id","readOnly","size","revalidateOnFormChange","validation","errorMessage","displayIcon","nativeProps","ref","hasValidators","validateTextual","validity","setValidity","useValidation","inputRef","useInternalRef","useRevalidateOnFormChange","useExternalValidation","ValidationIcon","useValidationIcon","handleChange","useCallback","event","handleInvalid","ValidationState","inputId","useInternalId","handleSelect","type","setType","useState","Icon","useMemo","IconLockOpen","IconLock","handleIconClick","jsxs","classNames","classes","jsx"],"mappings":"usBAgCaA,EAAgBC,EAAA,WACzB,CACI,CACI,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,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,UACjC,OAAOA,EAAY,SAAY,SAE7B,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,GAAyC,CACtC5B,EAAS4B,CAAK,CAClB,EACA,CAAC5B,CAAQ,CACb,EAEM6B,EAAgBF,EAAAA,YAAY,IAAM,CACpCT,EAAYY,kBAAgB,KAAK,CAAA,EAClC,CAACZ,CAAW,CAAC,EAEVa,EAAUC,gBAAc1B,CAAE,EAE1B2B,EAAeN,EAAA,YAChBC,GAAyC,CAC1BrB,GAAAqB,EAAM,OAAO,OAAO,CACpC,EACA,CAACrB,CAAQ,CACb,EAEM,CAAC2B,EAAMC,CAAO,EAAIC,EAAAA,SAAiC,UAAkB,EAErEC,EAAOC,EAAA,QACT,KACK,CACI,KAAiBC,EAAA,aACjB,SAAqBC,EAAAA,WACvBN,CAAI,EACX,CAACA,CAAI,CACT,EAEMO,EAAkBd,EAAAA,YAAY,IAAM,CAC7BO,IAAA,YAAsBC,EAAQ,MAAc,EAC5CD,IAAA,QAAkBC,EAAQ,UAAkB,CAAA,EACtD,CAACD,EAAMC,CAAO,CAAC,EAGd,OAAAO,EAAA,KAAC,MAAA,CACG,UAAWC,EACPC,EAAAA,QAAQ,QACR,CAAC,CAACA,EAAAA,QAAQ,kBAAkB,EAAGhC,CAAW,EAC1ChB,CACJ,EACA,SAAA,CAAAiD,EAAA,IAAC,QAAA,CACG,SAAU,GACV,QAASJ,EACT,UAAWG,EAAQ,QAAA,OACnB,QAASb,EACT,eAACM,EAAK,CAAA,CAAA,CAAA,CACV,EACAQ,EAAA,IAAC,QAAA,CACI,GAAGhC,EACJ,KAAAL,EACA,GAAIuB,EACJ,SAAAxB,EACA,YAAAV,EACA,UAAW+C,EAAQ,QAAA,MACnB,IAAKxB,EACL,SAAAtB,EACA,KAAAoC,EACA,MAAAnC,EACA,aAAAM,EACA,SAAUqB,EACV,OAAAxB,EACA,QAAAD,EACA,QAAAG,EACA,UAAAD,EACA,UAAW0B,EACX,QAASb,EACT,SAAUiB,CAAA,CACd,EACCrB,GAAeK,GAAY4B,MAACrB,EAAe,CAAA,CAAA,CAAA,CAAA,CAChD,CAAA,CAGZ,EAEA9B,EAAc,YAAc"}