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

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

{"version":3,"file":"InputColor.cjs","sources":["../../../../src/lib/InputColor/InputColor.tsx"],"sourcesContent":["import type {ChangeEvent, FocusEvent, InputHTMLAttributes} from 'react';\nimport {useMemo, useRef} from 'react';\nimport {forwardRef, useCallback} from 'react';\nimport classNames from 'classnames';\nimport {useLocalTheme} from 'css-vars-hook';\n\nimport {IconSwatches} from '@/internal/Icons';\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport type {\n    CallbackPropsTextual,\n    ValidationProps,\n    NativePropsInteractive,\n} from '@/internal/inputs';\nimport {useRevalidateOnFormChange} from '@/internal/inputs';\nimport {useExternalValidation, useValidation, useValidationIcon} from '@/internal/inputs';\nimport {useInternalId} from '@/internal/hooks/useInternalId.ts';\nimport {useInternalRef} from '@/internal/hooks/useInternalRef.ts';\n\nimport classes from './InputColor.module.css';\nimport {invertColor} from './invertColor.ts';\n\nexport type Props = DataAttributes &\n    LibraryProps &\n    NativePropsInteractive &\n    CallbackPropsTextual &\n    ValidationProps & {\n        /**\n         * Set text for placeholder.\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder\n         */\n        placeholder?: InputHTMLAttributes<HTMLInputElement>['placeholder'];\n        /**\n         * Provide a list if predefined colors to show in a browser-provided interface. Colors have to be in HEX format #000000.\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist#color_type\n         */\n        predefinedColors?: string[];\n    };\n\nexport const InputColor = 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: idProp,\n            predefinedColors = [],\n            errorMessage,\n            revalidateOnFormChange,\n            validation,\n            displayIcon = true,\n            ...nativeProps\n        },\n        ref\n    ) => {\n        const hasValidators = Boolean(validation);\n\n        const {validity, setValidity, validateTextual} = useValidation({\n            validation,\n            hasValidators,\n        });\n        const id = useInternalId(idProp);\n\n        const inputRef = useInternalRef(ref);\n        useExternalValidation({errorMessage, inputRef, setValidity, validation});\n\n        useRevalidateOnFormChange(inputRef, validateTextual, revalidateOnFormChange);\n\n        const ValidationIcon = useValidationIcon(validity);\n\n        const {LocalRoot, setTheme} = useLocalTheme();\n        const displayValue = (value ?? defaultValue) as string;\n        const theme = useMemo(\n            () => ({\n                'selected-color': displayValue,\n                'inverted-color': invertColor(displayValue, true),\n            }),\n            [displayValue]\n        );\n\n        const handleFocus = useCallback(\n            (event: FocusEvent<HTMLInputElement>) => {\n                onFocus(event);\n            },\n            [onFocus]\n        );\n\n        const labelRef = useRef<HTMLLabelElement>(null);\n\n        const handleBlur = useCallback(\n            (event: FocusEvent<HTMLInputElement>) => {\n                setTheme({\n                    'selected-color': event.target.value,\n                    'inverted-color': invertColor(event.target.value, true),\n                });\n\n                if (labelRef?.current) {\n                    labelRef.current.innerText = event.target.value;\n                }\n                onBlur(event);\n                onChange(event);\n            },\n            [setTheme, onBlur, onChange]\n        );\n\n        /* onChange callback makes color picker to lose focus. It triggered in onBlur instead. */\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setTheme({\n                    'selected-color': event.target.value,\n                    'inverted-color': 'transparent',\n                });\n            },\n            [setTheme]\n        );\n\n        const hasPredefinedColors = predefinedColors.length > 0;\n        const predefinedColorsListId = `${id}_predefinedColors`;\n\n        return (\n            <LocalRoot theme={theme} className={classNames(classes.wrapper, className)}>\n                <div className={classes.toggle}>\n                    <input\n                        {...nativeProps}\n                        id={id}\n                        ref={inputRef}\n                        type=\"color\"\n                        disabled={disabled}\n                        defaultValue={displayValue}\n                        className={classes.input}\n                        onBlur={handleBlur}\n                        onKeyUp={onKeyUp}\n                        onKeyDown={onKeyDown}\n                        onFocus={handleFocus}\n                        onChange={handleChange}\n                        list={hasPredefinedColors ? predefinedColorsListId : undefined}\n                    />\n                    <IconSwatches className={classNames(classes.icon)} />\n                </div>\n                <label htmlFor={id} className={classes.label} ref={labelRef}>\n                    {displayValue.toLowerCase() || placeholder}\n                </label>\n                {displayIcon && validity && <ValidationIcon />}\n                {hasPredefinedColors && (\n                    <datalist id={predefinedColorsListId}>\n                        {predefinedColors.map(color => {\n                            return <option key={color} value={color} />;\n                        })}\n                    </datalist>\n                )}\n            </LocalRoot>\n        );\n    }\n);\n\nInputColor.displayName = 'InputColor';\n"],"names":["InputColor","forwardRef","className","placeholder","disabled","value","onChange","onFocus","onBlur","onKeyDown","onKeyUp","defaultValue","idProp","predefinedColors","errorMessage","revalidateOnFormChange","validation","displayIcon","nativeProps","ref","hasValidators","validity","setValidity","validateTextual","useValidation","id","useInternalId","inputRef","useInternalRef","useExternalValidation","useRevalidateOnFormChange","ValidationIcon","useValidationIcon","LocalRoot","setTheme","useLocalTheme","displayValue","theme","useMemo","invertColor","handleFocus","useCallback","event","labelRef","useRef","handleBlur","handleChange","hasPredefinedColors","predefinedColorsListId","jsxs","classNames","classes","jsx","IconSwatches","color"],"mappings":"wpBAsCaA,EAAaC,EAAAA,WACtB,CACI,CACI,UAAAC,EACA,YAAAC,EAAc,UACd,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,GAAIC,EACJ,iBAAAC,EAAmB,CAAA,EACnB,aAAAC,EACA,uBAAAC,EACA,WAAAC,EACA,YAAAC,EAAc,GACd,GAAGC,CAAA,EAEPC,IACC,CACD,MAAMC,EAAgB,EAAQJ,EAExB,CAAC,SAAAK,EAAU,YAAAC,EAAa,gBAAAC,CAAA,EAAmBC,EAAAA,cAAc,CAC3D,WAAAR,EACA,cAAAI,CAAA,CACH,EACKK,EAAKC,EAAAA,cAAcd,CAAM,EAEzBe,EAAWC,EAAAA,eAAeT,CAAG,EACnCU,EAAAA,sBAAsB,CAAC,aAAAf,EAAc,SAAAa,EAAU,YAAAL,EAAa,WAAAN,EAAW,EAEvEc,4BAA0BH,EAAUJ,EAAiBR,CAAsB,EAE3E,MAAMgB,EAAiBC,EAAAA,kBAAkBX,CAAQ,EAE3C,CAAC,UAAAY,EAAW,SAAAC,CAAA,EAAYC,gBAAA,EACxBC,EAAgB/B,GAASM,EACzB0B,EAAQC,EAAAA,QACV,KAAO,CACH,iBAAkBF,EAClB,iBAAkBG,EAAAA,YAAYH,CAAkB,CAAA,GAEpD,CAACA,CAAY,CAAA,EAGXI,EAAcC,EAAAA,YACfC,GAAwC,CACrCnC,EAAQmC,CAAK,CACjB,EACA,CAACnC,CAAO,CAAA,EAGNoC,EAAWC,EAAAA,OAAyB,IAAI,EAExCC,EAAaJ,EAAAA,YACdC,GAAwC,CACrCR,EAAS,CACL,iBAAkBQ,EAAM,OAAO,MAC/B,iBAAkBH,EAAAA,YAAYG,EAAM,OAAO,KAAW,CAAA,CACzD,EAEGC,GAAU,UACVA,EAAS,QAAQ,UAAYD,EAAM,OAAO,OAE9ClC,EAAOkC,CAAK,EACZpC,EAASoC,CAAK,CAClB,EACA,CAACR,EAAU1B,EAAQF,CAAQ,CAAA,EAIzBwC,EAAeL,EAAAA,YAChBC,GAAyC,CACtCR,EAAS,CACL,iBAAkBQ,EAAM,OAAO,MAC/B,iBAAkB,aAAA,CACrB,CACL,EACA,CAACR,CAAQ,CAAA,EAGPa,EAAsBlC,EAAiB,OAAS,EAChDmC,EAAyB,GAAGvB,CAAE,oBAEpC,OACIwB,OAAChB,GAAU,MAAAI,EAAc,UAAWa,EAAWC,EAAAA,QAAQ,QAASjD,CAAS,EACrE,SAAA,CAAA+C,EAAAA,KAAC,MAAA,CAAI,UAAWE,EAAAA,QAAQ,OACpB,SAAA,CAAAC,EAAAA,IAAC,QAAA,CACI,GAAGlC,EACJ,GAAAO,EACA,IAAKE,EACL,KAAK,QACL,SAAAvB,EACA,aAAcgC,EACd,UAAWe,EAAAA,QAAQ,MACnB,OAAQN,EACR,QAAAnC,EACA,UAAAD,EACA,QAAS+B,EACT,SAAUM,EACV,KAAMC,EAAsBC,EAAyB,MAAA,CAAA,QAExDK,EAAAA,aAAA,CAAa,UAAWH,EAAWC,EAAAA,QAAQ,IAAI,CAAA,CAAG,CAAA,EACvD,EACAC,EAAAA,IAAC,QAAA,CAAM,QAAS3B,EAAI,UAAW0B,EAAAA,QAAQ,MAAO,IAAKR,EAC9C,SAAAP,EAAa,YAAA,GAAiBjC,CAAA,CACnC,EACCc,GAAeI,GAAY+B,MAACrB,EAAA,CAAA,CAAe,EAC3CgB,GACGK,EAAAA,IAAC,WAAA,CAAS,GAAIJ,EACT,SAAAnC,EAAiB,IAAIyC,GACXF,EAAAA,IAAC,SAAA,CAAmB,MAAOE,CAAA,EAAdA,CAAqB,CAC5C,CAAA,CACL,CAAA,EAER,CAER,CACJ,EAEAtD,EAAW,YAAc"}