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

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

{"version":3,"file":"InputCheckbox.cjs","sources":["../../../../src/lib/InputCheckbox/InputCheckbox.tsx"],"sourcesContent":["import type {ChangeEvent} from 'react';\nimport {forwardRef, useCallback, useEffect} from 'react';\nimport classNames from 'classnames';\n\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport {\n    ValidationState,\n    useValidation,\n    useRevalidateOnFormChange,\n    useExternalValidation,\n    useValidationIcon,\n} from '@/internal/inputs';\nimport type {\n    NativePropsInteractive,\n    CallbackPropsInteractive,\n    ValidationProps,\n} from '@/internal/inputs';\nimport {useInternalId} from '@/internal/hooks/useInternalId.ts';\nimport {useInternalRef} from '@/internal/hooks/useInternalRef.ts';\n\nimport classes from './InputCheckbox.module.css';\n\nexport type Props = DataAttributes &\n    LibraryProps &\n    NativePropsInteractive &\n    CallbackPropsInteractive &\n    ValidationProps & {\n        /** Set a text for the checkbox label */\n        label?: string;\n        /**\n         * Set an indeterminate state for the checkbox\n         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\n         */\n        indeterminate?: boolean;\n    };\n\nexport const InputCheckbox = forwardRef<HTMLInputElement, Props>(\n    (\n        {\n            className,\n            disabled,\n            value,\n            onChange = () => {},\n            onFocus = () => {},\n            onBlur = () => {},\n            onKeyDown = () => {},\n            onKeyUp = () => {},\n            checked,\n            defaultChecked,\n            id: idProp,\n            label,\n            required,\n            revalidateOnFormChange,\n            validation,\n            errorMessage,\n            indeterminate = false,\n            displayIcon = true,\n            ...nativeProps\n        },\n        ref\n    ) => {\n        const id = useInternalId(idProp);\n\n        const hasValidators = Boolean(validation) || Boolean(required);\n\n        const {validateInteractive, validity, setValidity} = useValidation({\n            validation,\n            hasValidators,\n        });\n\n        const inputRef = useInternalRef(ref);\n        useRevalidateOnFormChange(inputRef, validateInteractive, revalidateOnFormChange);\n\n        useExternalValidation({errorMessage, inputRef, setValidity, validation});\n\n        const ValidationIcon = useValidationIcon(validity);\n\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        useEffect(() => {\n            if (inputRef.current) {\n                inputRef.current.indeterminate = indeterminate;\n            }\n        }, [indeterminate, inputRef]);\n\n        return (\n            <div\n                className={classNames(\n                    classes.wrapper,\n                    {[classes.withValidationIcon]: displayIcon},\n                    className\n                )}>\n                <input\n                    {...nativeProps}\n                    className={classNames(classes.input, {[classes.indeterminate]: indeterminate})}\n                    ref={inputRef}\n                    disabled={disabled}\n                    type=\"checkbox\"\n                    id={id}\n                    value={value}\n                    checked={checked}\n                    defaultChecked={defaultChecked}\n                    onChange={handleChange}\n                    onBlur={onBlur}\n                    onFocus={onFocus}\n                    onKeyUp={onKeyUp}\n                    onKeyDown={onKeyDown}\n                    onInput={validateInteractive}\n                    onInvalid={handleInvalid}\n                    required={required}\n                />\n                {label && (\n                    <label\n                        className={classNames(classes.label, {[classes.required]: required})}\n                        htmlFor={id}>\n                        {label}\n                    </label>\n                )}\n                {displayIcon && validity && <ValidationIcon className={classes.icon} />}\n            </div>\n        );\n    }\n);\n\nInputCheckbox.displayName = 'InputCheckbox';\n"],"names":["InputCheckbox","forwardRef","className","disabled","value","onChange","onFocus","onBlur","onKeyDown","onKeyUp","checked","defaultChecked","idProp","label","required","revalidateOnFormChange","validation","errorMessage","indeterminate","displayIcon","nativeProps","ref","id","useInternalId","hasValidators","validateInteractive","validity","setValidity","useValidation","inputRef","useInternalRef","useRevalidateOnFormChange","useExternalValidation","ValidationIcon","useValidationIcon","handleChange","useCallback","event","handleInvalid","ValidationState","useEffect","jsxs","classNames","classes","jsx"],"mappings":"qmBAoCaA,EAAgBC,EAAA,WACzB,CACI,CACI,UAAAC,EACA,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,QAAAC,EACA,eAAAC,EACA,GAAIC,EACJ,MAAAC,EACA,SAAAC,EACA,uBAAAC,EACA,WAAAC,EACA,aAAAC,EACA,cAAAC,EAAgB,GAChB,YAAAC,EAAc,GACd,GAAGC,GAEPC,IACC,CACK,MAAAC,EAAKC,gBAAcX,CAAM,EAEzBY,EAAgB,EAAQR,GAAe,EAAQF,EAE/C,CAAC,oBAAAW,EAAqB,SAAAC,EAAU,YAAAC,CAAA,EAAeC,EAAAA,cAAc,CAC/D,WAAAZ,EACA,cAAAQ,CAAA,CACH,EAEKK,EAAWC,iBAAeT,CAAG,EACTU,4BAAAF,EAAUJ,EAAqBV,CAAsB,EAE/EiB,EAAAA,sBAAsB,CAAC,aAAAf,EAAc,SAAAY,EAAU,YAAAF,EAAa,WAAAX,EAAW,EAEjE,MAAAiB,EAAiBC,oBAAkBR,CAAQ,EAE3CS,EAAeC,EAAA,YAChBC,GAAyC,CACtChC,EAASgC,CAAK,CAClB,EACA,CAAChC,CAAQ,CACb,EAEMiC,EAAgBF,EAAAA,YAAY,IAAM,CACpCT,EAAYY,kBAAgB,KAAK,CAAA,EAClC,CAACZ,CAAW,CAAC,EAEhBa,OAAAA,EAAAA,UAAU,IAAM,CACRX,EAAS,UACTA,EAAS,QAAQ,cAAgBX,EACrC,EACD,CAACA,EAAeW,CAAQ,CAAC,EAGxBY,EAAA,KAAC,MAAA,CACG,UAAWC,EACPC,EAAAA,QAAQ,QACR,CAAC,CAACA,EAAAA,QAAQ,kBAAkB,EAAGxB,CAAW,EAC1CjB,CACJ,EACA,SAAA,CAAA0C,EAAA,IAAC,QAAA,CACI,GAAGxB,EACJ,UAAWsB,EAAWC,EAAAA,QAAQ,MAAO,CAAC,CAACA,UAAQ,aAAa,EAAGzB,EAAc,EAC7E,IAAKW,EACL,SAAA1B,EACA,KAAK,WACL,GAAAmB,EACA,MAAAlB,EACA,QAAAM,EACA,eAAAC,EACA,SAAUwB,EACV,OAAA5B,EACA,QAAAD,EACA,QAAAG,EACA,UAAAD,EACA,QAASiB,EACT,UAAWa,EACX,SAAAxB,CAAA,CACJ,EACCD,GACG+B,EAAA,IAAC,QAAA,CACG,UAAWF,EAAWC,EAAAA,QAAQ,MAAO,CAAC,CAACA,UAAQ,QAAQ,EAAG7B,EAAS,EACnE,QAASQ,EACR,SAAAT,CAAA,CACL,EAEHM,GAAeO,GAAYkB,MAACX,EAAe,CAAA,UAAWU,UAAQ,IAAM,CAAA,CAAA,CAAA,CACzE,CAAA,CAGZ,EAEA3C,EAAc,YAAc"}