{"version":3,"file":"InputNumber.cjs","sources":["../../../../src/lib/InputNumber/InputNumber.tsx"],"sourcesContent":["import type {ChangeEvent, InputHTMLAttributes, FormEvent} from 'react';\nimport {useEffect} from 'react';\nimport {forwardRef, useCallback, useMemo} from 'react';\nimport classNames from 'classnames';\nimport {useLocalTheme} from 'css-vars-hook';\n\nimport {IconArrowUp, IconArrowDown} from '@/internal/Icons';\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport type {NativePropsNumeric, CallbackPropsTextual, ValidationProps} from '@/internal/inputs';\nimport {\n    ValidationState,\n    useValidation,\n    useExternalValidation,\n    useRevalidateOnFormChange,\n    useValidationIcon,\n} from '@/internal/inputs';\nimport {useInternalRef} from '@/internal/hooks/useInternalRef.ts';\n\nimport classes from './InputNumber.module.css';\n\nexport type Props = DataAttributes &\n    LibraryProps &\n    NativePropsNumeric &\n    CallbackPropsTextual &\n    ValidationProps & {\n        /**\n         * Define the width of the input in characters\n         */\n        size?: InputHTMLAttributes<HTMLInputElement>['size'];\n    };\n\nconst SPINNER_EVENT_TYPE = 'change_spinner';\n\nconst ChangeEventSpinner = new Event(SPINNER_EVENT_TYPE, {bubbles: true});\n\nexport const InputNumber = 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            size = 10,\n            step,\n            revalidateOnFormChange,\n            errorMessage = ValidationState.error,\n            validation,\n            displayIcon = true,\n            ...nativeProps\n        },\n        ref\n    ) => {\n        const hasValidators =\n            Boolean(validation) ||\n            Boolean(nativeProps.required) ||\n            typeof nativeProps.min === 'number' ||\n            typeof nativeProps.min === 'string' ||\n            typeof nativeProps.max === 'number' ||\n            typeof nativeProps.max === '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        useEffect(() => {\n            inputRef.current?.addEventListener(SPINNER_EVENT_TYPE, event => {\n                // TODO: improve type\n                onChange(event as unknown as ChangeEvent<HTMLInputElement>);\n            });\n        }, [inputRef, onChange]);\n\n        const handleInvalid = useCallback(() => {\n            setValidity(ValidationState.error);\n        }, [setValidity]);\n\n        const handleDecrement = useCallback(() => {\n            inputRef.current!.stepDown();\n            inputRef.current!.dispatchEvent(ChangeEventSpinner);\n            validateTextual(ChangeEventSpinner as unknown as FormEvent);\n        }, [inputRef, validateTextual]);\n\n        const handleIncrement = useCallback(() => {\n            inputRef.current!.stepUp();\n            inputRef.current!.dispatchEvent(ChangeEventSpinner);\n            validateTextual(ChangeEventSpinner as unknown as FormEvent);\n        }, [inputRef, validateTextual]);\n\n        const {LocalRoot} = useLocalTheme();\n        const theme = useMemo(() => ({size}), [size]);\n\n        return (\n            <LocalRoot\n                className={classNames(\n                    classes.wrapper,\n                    {[classes.withValidationIcon]: displayIcon},\n                    className\n                )}\n                theme={theme}>\n                <div className={classes.spinner}>\n                    <IconArrowUp tabIndex={-1} onClick={handleIncrement} />\n                    <IconArrowDown tabIndex={-1} onClick={handleDecrement} />\n                </div>\n                <input\n                    {...nativeProps}\n                    step={step}\n                    size={size}\n                    type=\"number\"\n                    placeholder={placeholder}\n                    className={classes.input}\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={validateTextual}\n                />\n                {displayIcon && validity && <ValidationIcon className={classes.validation} />}\n            </LocalRoot>\n        );\n    }\n);\n\nInputNumber.displayName = 'InputNumber';\n"],"names":["SPINNER_EVENT_TYPE","ChangeEventSpinner","InputNumber","forwardRef","className","placeholder","disabled","value","onChange","onFocus","onBlur","onKeyDown","onKeyUp","defaultValue","size","step","revalidateOnFormChange","errorMessage","ValidationState","validation","displayIcon","nativeProps","ref","hasValidators","validateTextual","validity","setValidity","useValidation","inputRef","useInternalRef","useRevalidateOnFormChange","useExternalValidation","ValidationIcon","useValidationIcon","handleChange","useCallback","event","useEffect","handleInvalid","handleDecrement","handleIncrement","LocalRoot","useLocalTheme","theme","useMemo","jsxs","classNames","classes","jsx","IconArrowUp","IconArrowDown"],"mappings":"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"}