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

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

{"version":3,"file":"InputDate.cjs","sources":["../../../../src/lib/InputDate/InputDate.tsx"],"sourcesContent":["import type {ChangeEvent, FocusEvent} from 'react';\nimport {useRef} from 'react';\nimport {forwardRef, useCallback} from 'react';\nimport classNames from 'classnames';\n\nimport {IconCalendar} from '@/internal/Icons';\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport type {NativePropsTextual, CallbackPropsTextual, ValidationProps} from '@/internal/inputs';\nimport {\n    useRevalidateOnFormChange,\n    useExternalValidation,\n    useValidationIcon,\n    ValidationState,\n    useValidation,\n} from '@/internal/inputs';\nimport {useInternalId} from '@/internal/hooks/useInternalId.ts';\nimport {useInternalRef} from '@/internal/hooks/useInternalRef.ts';\n\nimport classes from './InputDate.module.css';\n\nexport type Props = DataAttributes &\n    LibraryProps &\n    Omit<NativePropsTextual, 'maxLength' | 'minLength' | 'autoComplete' | 'inputMode' | 'pattern'> &\n    CallbackPropsTextual &\n    ValidationProps & {min?: string; max?: string};\n\nexport const InputDate = forwardRef<HTMLInputElement, Props>(\n    (\n        {\n            id: idProp,\n            className,\n            placeholder = 'YYYY-MM-DD',\n            disabled,\n            value,\n            onChange = () => {},\n            onFocus = () => {},\n            onBlur = () => {},\n            onKeyDown = () => {},\n            onKeyUp = () => {},\n            defaultValue,\n            revalidateOnFormChange,\n            validation,\n            errorMessage,\n            displayIcon = true,\n            ...nativeProps\n        },\n        ref\n    ) => {\n        const hasValidators =\n            Boolean(validation) ||\n            typeof nativeProps.min === 'string' ||\n            typeof nativeProps.max === 'string';\n\n        const id = useInternalId(idProp);\n        const labelRef = useRef<HTMLLabelElement>(null);\n\n        const {validateTextual, validity, setValidity} = useValidation({validation, hasValidators});\n\n        const inputRef = useInternalRef(ref);\n\n        useExternalValidation({errorMessage, inputRef, setValidity, validation});\n        useRevalidateOnFormChange(inputRef, validateTextual, revalidateOnFormChange);\n\n        const ValidationIcon = useValidationIcon(validity);\n\n        const displayValue = (value ?? defaultValue) as string;\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                onChange(event);\n                if (labelRef?.current) {\n                    labelRef.current.innerText = event.target.value;\n                }\n            },\n            [onChange]\n        );\n\n        const handleInvalid = useCallback(() => {\n            setValidity(ValidationState.error);\n        }, [setValidity]);\n\n        const handleFocus = useCallback(\n            (event: FocusEvent<HTMLInputElement>) => {\n                onFocus(event);\n                event.target.showPicker();\n            },\n            [onFocus]\n        );\n        const handleBlur = useCallback(\n            (event: FocusEvent<HTMLInputElement>) => {\n                onBlur(event);\n            },\n            [onBlur]\n        );\n\n        const handleInput = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                validateTextual(event);\n            },\n            [validateTextual]\n        );\n\n        return (\n            <div\n                className={classNames(\n                    classes.wrapper,\n                    {[classes.withValidationIcon]: displayIcon},\n                    className\n                )}>\n                <div className={classes.toggle}>\n                    <input\n                        {...nativeProps}\n                        id={id}\n                        ref={inputRef}\n                        className={classes.input}\n                        type=\"date\"\n                        disabled={disabled}\n                        value={value}\n                        defaultValue={defaultValue}\n                        onChange={handleChange}\n                        onInvalid={handleInvalid}\n                        onInput={handleInput}\n                        onFocus={handleFocus}\n                        onBlur={handleBlur}\n                        onKeyUp={onKeyUp}\n                        onKeyDown={onKeyDown}\n                    />\n                    <label htmlFor={id} className={classes.icon}>\n                        <IconCalendar />\n                    </label>\n                </div>\n                <label htmlFor={id} className={classes.label} ref={labelRef}>\n                    {displayValue || placeholder}\n                </label>\n                {displayIcon && validity && <ValidationIcon className={classes.validity} />}\n            </div>\n        );\n    }\n);\n\nInputDate.displayName = 'InputDate';\n"],"names":["InputDate","forwardRef","idProp","className","placeholder","disabled","value","onChange","onFocus","onBlur","onKeyDown","onKeyUp","defaultValue","revalidateOnFormChange","validation","errorMessage","displayIcon","nativeProps","ref","hasValidators","id","useInternalId","labelRef","useRef","validateTextual","validity","setValidity","useValidation","inputRef","useInternalRef","useExternalValidation","useRevalidateOnFormChange","ValidationIcon","useValidationIcon","displayValue","handleChange","useCallback","event","handleInvalid","ValidationState","handleFocus","handleBlur","handleInput","jsxs","classNames","classes","jsx","IconCalendar"],"mappings":"opBA0BaA,EAAYC,EAAA,WACrB,CACI,CACI,GAAIC,EACJ,UAAAC,EACA,YAAAC,EAAc,aACd,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,uBAAAC,EACA,WAAAC,EACA,aAAAC,EACA,YAAAC,EAAc,GACd,GAAGC,GAEPC,IACC,CACK,MAAAC,EACF,EAAQL,GACR,OAAOG,EAAY,KAAQ,UAC3B,OAAOA,EAAY,KAAQ,SAEzBG,EAAKC,gBAAcnB,CAAM,EACzBoB,EAAWC,SAAyB,IAAI,EAExC,CAAC,gBAAAC,EAAiB,SAAAC,EAAU,YAAAC,CAAA,EAAeC,EAAAA,cAAc,CAAC,WAAAb,EAAY,cAAAK,EAAc,EAEpFS,EAAWC,iBAAeX,CAAG,EAEnCY,EAAAA,sBAAsB,CAAC,aAAAf,EAAc,SAAAa,EAAU,YAAAF,EAAa,WAAAZ,EAAW,EAC7CiB,4BAAAH,EAAUJ,EAAiBX,CAAsB,EAErE,MAAAmB,EAAiBC,oBAAkBR,CAAQ,EAE3CS,EAAgB5B,GAASM,EACzBuB,EAAeC,EAAA,YAChBC,GAAyC,CACtC9B,EAAS8B,CAAK,EACVf,GAAA,MAAAA,EAAU,UACDA,EAAA,QAAQ,UAAYe,EAAM,OAAO,MAElD,EACA,CAAC9B,CAAQ,CACb,EAEM+B,EAAgBF,EAAAA,YAAY,IAAM,CACpCV,EAAYa,kBAAgB,KAAK,CAAA,EAClC,CAACb,CAAW,CAAC,EAEVc,EAAcJ,EAAA,YACfC,GAAwC,CACrC7B,EAAQ6B,CAAK,EACbA,EAAM,OAAO,WAAW,CAC5B,EACA,CAAC7B,CAAO,CACZ,EACMiC,EAAaL,EAAA,YACdC,GAAwC,CACrC5B,EAAO4B,CAAK,CAChB,EACA,CAAC5B,CAAM,CACX,EAEMiC,EAAcN,EAAA,YACfC,GAAyC,CACtCb,EAAgBa,CAAK,CACzB,EACA,CAACb,CAAe,CACpB,EAGI,OAAAmB,EAAA,KAAC,MAAA,CACG,UAAWC,EACPC,EAAAA,QAAQ,QACR,CAAC,CAACA,EAAAA,QAAQ,kBAAkB,EAAG7B,CAAW,EAC1Cb,CACJ,EACA,SAAA,CAACwC,EAAA,KAAA,MAAA,CAAI,UAAWE,EAAAA,QAAQ,OACpB,SAAA,CAAAC,EAAA,IAAC,QAAA,CACI,GAAG7B,EACJ,GAAAG,EACA,IAAKQ,EACL,UAAWiB,EAAQ,QAAA,MACnB,KAAK,OACL,SAAAxC,EACA,MAAAC,EACA,aAAAM,EACA,SAAUuB,EACV,UAAWG,EACX,QAASI,EACT,QAASF,EACT,OAAQC,EACR,QAAA9B,EACA,UAAAD,CAAA,CACJ,EACAoC,EAAAA,IAAC,SAAM,QAAS1B,EAAI,UAAWyB,UAAQ,KACnC,SAACC,EAAAA,IAAAC,EAAA,aAAA,CAAa,CAAA,CAClB,CAAA,CAAA,EACJ,EACAD,EAAAA,IAAC,QAAM,CAAA,QAAS1B,EAAI,UAAWyB,EAAAA,QAAQ,MAAO,IAAKvB,EAC9C,SAAAY,GAAgB9B,CACrB,CAAA,EACCY,GAAeS,GAAYqB,MAACd,EAAe,CAAA,UAAWa,UAAQ,QAAU,CAAA,CAAA,CAAA,CAC7E,CAAA,CAGZ,EAEA7C,EAAU,YAAc"}