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

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

{"version":3,"file":"Select.cjs","sources":["../../../../src/lib/Select/Select.tsx"],"sourcesContent":["import type {ChangeEvent, FC, SelectHTMLAttributes, ReactNode} from 'react';\nimport {forwardRef, useCallback, useMemo} from 'react';\nimport classNames from 'classnames';\nimport {useLocalTheme} from 'css-vars-hook';\n\nimport {IconExpand} from '@/internal/Icons';\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport type {\n    NativePropsInteractive,\n    CallbackPropsTextual,\n    ValidationProps,\n} from '@/internal/inputs';\nimport {useExternalValidation} from '@/internal/inputs';\nimport {useRevalidateOnFormChange} from '@/internal/inputs';\nimport {ValidationState, useValidationIcon, useValidation} from '@/internal/inputs';\nimport {useInternalId} from '@/internal/hooks/useInternalId.ts';\nimport {useInternalRef} from '@/internal/hooks/useInternalRef.ts';\n\nimport classes from './Select.module.css';\n\nexport type Props = DataAttributes &\n    LibraryProps &\n    NativePropsInteractive &\n    Omit<CallbackPropsTextual<HTMLSelectElement>, 'defaultValue'> &\n    ValidationProps & {\n        children?: ReactNode;\n        prefix?: FC;\n        multiple?: SelectHTMLAttributes<HTMLSelectElement>['multiple'];\n        /**\n         * Define the width of the input in characters\n         */\n        size?: SelectHTMLAttributes<HTMLSelectElement>['size'];\n    };\n\nexport const Select = forwardRef<HTMLSelectElement, Props>(\n    (\n        {\n            prefix: Prefix,\n            className,\n            disabled,\n            value,\n            onChange = () => {},\n            onFocus = () => {},\n            onBlur = () => {},\n            onKeyDown = () => {},\n            onKeyUp = () => {},\n            id,\n            multiple,\n            children,\n            size = 16,\n            revalidateOnFormChange,\n            validation,\n            errorMessage,\n            ...nativeProps\n        },\n        ref\n    ) => {\n        const {LocalRoot} = useLocalTheme();\n        const theme = useMemo(\n            () => ({\n                'select-width': `${size}ch`,\n            }),\n            [size]\n        );\n\n        const hasValidators = Boolean(validation);\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<HTMLSelectElement>) => {\n                onChange(event);\n            },\n            [onChange]\n        );\n\n        const handleInvalid = useCallback(() => {\n            setValidity(ValidationState.error);\n        }, [setValidity]);\n\n        const selectId = useInternalId(id);\n\n        return (\n            <LocalRoot theme={theme} className={classNames(classes.wrapper, className)}>\n                {Prefix && (\n                    <label className={classes.prefix} htmlFor={selectId}>\n                        <Prefix />\n                    </label>\n                )}\n                <div className={classes.iconWrapper}>\n                    <select\n                        {...nativeProps}\n                        id={selectId}\n                        multiple={multiple}\n                        className={classes.select}\n                        ref={inputRef}\n                        disabled={disabled}\n                        value={value}\n                        onChange={handleChange}\n                        onFocus={onFocus}\n                        onBlur={onBlur}\n                        onKeyUp={onKeyUp}\n                        onKeyDown={onKeyDown}\n                        onInvalid={handleInvalid}\n                        onInput={validateTextual}>\n                        {children}\n                    </select>\n                    {!multiple && <IconExpand className={classes.icon} />}\n                </div>\n                {validity && <ValidationIcon className={classes.validation} />}\n            </LocalRoot>\n        );\n    }\n);\n\nSelect.displayName = 'Select';\n"],"names":["Select","forwardRef","Prefix","className","disabled","value","onChange","onFocus","onBlur","onKeyDown","onKeyUp","id","multiple","children","size","revalidateOnFormChange","validation","errorMessage","nativeProps","ref","LocalRoot","useLocalTheme","theme","useMemo","hasValidators","validateTextual","validity","setValidity","useValidation","inputRef","useInternalRef","useRevalidateOnFormChange","useExternalValidation","ValidationIcon","useValidationIcon","handleChange","useCallback","event","handleInvalid","ValidationState","selectId","useInternalId","jsxs","classNames","classes","jsx","IconExpand"],"mappings":"0qBAkCaA,EAASC,EAAA,WAClB,CACI,CACI,OAAQC,EACR,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,GAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,GACP,uBAAAC,EACA,WAAAC,EACA,aAAAC,EACA,GAAGC,GAEPC,IACC,CACK,KAAA,CAAC,UAAAC,CAAS,EAAIC,gBAAc,EAC5BC,EAAQC,EAAA,QACV,KAAO,CACH,eAAgB,GAAGT,CAAI,IAAA,GAE3B,CAACA,CAAI,CACT,EAEMU,EAAgB,EAAQR,EAExB,CAAC,gBAAAS,EAAiB,SAAAC,EAAU,YAAAC,CAAA,EAAeC,EAAAA,cAAc,CAAC,WAAAZ,EAAY,cAAAQ,EAAc,EAEpFK,EAAWC,iBAAeX,CAAG,EACTY,4BAAAF,EAAUJ,EAAiBV,CAAsB,EAC3EiB,EAAAA,sBAAsB,CAAC,aAAAf,EAAc,SAAAY,EAAU,YAAAF,EAAa,WAAAX,EAAW,EAEjE,MAAAiB,EAAiBC,oBAAkBR,CAAQ,EAC3CS,EAAeC,EAAA,YAChBC,GAA0C,CACvC/B,EAAS+B,CAAK,CAClB,EACA,CAAC/B,CAAQ,CACb,EAEMgC,EAAgBF,EAAAA,YAAY,IAAM,CACpCT,EAAYY,kBAAgB,KAAK,CAAA,EAClC,CAACZ,CAAW,CAAC,EAEVa,EAAWC,gBAAc9B,CAAE,EAG7B,OAAA+B,OAACtB,GAAU,MAAAE,EAAc,UAAWqB,EAAWC,EAAAA,QAAQ,QAASzC,CAAS,EACpE,SAAA,CACGD,GAAA2C,EAAAA,IAAC,SAAM,UAAWD,EAAA,QAAQ,OAAQ,QAASJ,EACvC,SAACK,EAAAA,IAAA3C,EAAA,CAAA,CAAO,CACZ,CAAA,EAEHwC,EAAA,KAAA,MAAA,CAAI,UAAWE,EAAAA,QAAQ,YACpB,SAAA,CAAAC,EAAA,IAAC,SAAA,CACI,GAAG3B,EACJ,GAAIsB,EACJ,SAAA5B,EACA,UAAWgC,EAAQ,QAAA,OACnB,IAAKf,EACL,SAAAzB,EACA,MAAAC,EACA,SAAU8B,EACV,QAAA5B,EACA,OAAAC,EACA,QAAAE,EACA,UAAAD,EACA,UAAW6B,EACX,QAASb,EACR,SAAAZ,CAAA,CACL,EACC,CAACD,GAAYiC,EAAAA,IAACC,EAAAA,WAAW,CAAA,UAAWF,UAAQ,IAAM,CAAA,CAAA,EACvD,EACClB,GAAYmB,EAAA,IAACZ,EAAe,CAAA,UAAWW,EAAAA,QAAQ,UAAY,CAAA,CAAA,EAChE,CAAA,CAGZ,EAEA5C,EAAO,YAAc"}