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

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

{"version":3,"file":"FormField.cjs","sources":["../../../../src/lib/FormField/FormField.tsx"],"sourcesContent":["import {Children, cloneElement, forwardRef, useMemo} from 'react';\nimport type {ReactElement} from 'react';\nimport classNames from 'classnames';\n\nimport type {LibraryProps, DataAttributes} from '@/internal/LibraryAPI';\nimport {useInternalId} from '@/internal/hooks/useInternalId.ts';\n\nimport classes from './FormField.module.css';\n\nexport type Props = DataAttributes &\n    LibraryProps & {\n        children: ReactElement;\n        /** Set text label */\n        label: string;\n        /** Set hint text to be displayed below the input */\n        hint?: string;\n        /**\n         * Renders * character after label indicating required input status.\n         * Also, set automatically when required input is provided.\n         */\n        required?: boolean;\n    };\n\nexport const FormField = forwardRef<HTMLDivElement, Props>(\n    ({className, children, label, hint, required, ...nativeProps}, ref) => {\n        const inputProps = Children.only(children).props;\n        const id = useInternalId(inputProps.id);\n        const hintId = `${id}-hint`;\n        const childrenWithProps = useMemo(\n            () =>\n                cloneElement(Children.only(children), {\n                    id,\n                    ...(hint && {'aria-describedby': hintId}),\n                }),\n            [children, hint, hintId, id]\n        );\n        return (\n            <div {...nativeProps} ref={ref} className={classNames(classes.wrapper, className)}>\n                <label\n                    className={classNames(classes.label, {\n                        [classes.required]: inputProps.required || required,\n                    })}\n                    htmlFor={id}>\n                    {label}\n                </label>\n                {childrenWithProps}\n                {hint && (\n                    <div className={classes.hint} id={hintId}>\n                        {hint}\n                    </div>\n                )}\n            </div>\n        );\n    }\n);\n\nFormField.displayName = 'FormField';\n"],"names":["FormField","forwardRef","className","children","label","hint","required","nativeProps","ref","inputProps","Children","id","useInternalId","hintId","childrenWithProps","useMemo","cloneElement","jsxs","classNames","classes","jsx"],"mappings":"yQAuBaA,EAAYC,EAAAA,WACrB,CAAC,CAAC,UAAAC,EAAW,SAAAC,EAAU,MAAAC,EAAO,KAAAC,EAAM,SAAAC,EAAU,GAAGC,CAAA,EAAcC,IAAQ,CACnE,MAAMC,EAAaC,EAAAA,SAAS,KAAKP,CAAQ,EAAE,MACrCQ,EAAKC,EAAAA,cAAcH,EAAW,EAAE,EAChCI,EAAS,GAAGF,CAAE,QACdG,EAAoBC,EAAAA,QACtB,IACIC,eAAaN,EAAAA,SAAS,KAAKP,CAAQ,EAAG,CAClC,GAAAQ,EACA,GAAIN,GAAQ,CAAC,mBAAoBQ,CAAA,CAAM,CAC1C,EACL,CAACV,EAAUE,EAAMQ,EAAQF,CAAE,CAAA,EAE/B,OACIM,OAAC,MAAA,CAAK,GAAGV,EAAa,IAAAC,EAAU,UAAWU,EAAWC,EAAAA,QAAQ,QAASjB,CAAS,EAC5E,SAAA,CAAAkB,EAAAA,IAAC,QAAA,CACG,UAAWF,EAAWC,EAAAA,QAAQ,MAAO,CACjC,CAACA,UAAQ,QAAQ,EAAGV,EAAW,UAAYH,CAAA,CAC9C,EACD,QAASK,EACR,SAAAP,CAAA,CAAA,EAEJU,EACAT,SACI,MAAA,CAAI,UAAWc,EAAAA,QAAQ,KAAM,GAAIN,EAC7B,SAAAR,CAAA,CACL,CAAA,EAER,CAER,CACJ,EAEAL,EAAU,YAAc"}