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

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

{"version":3,"file":"InputGroup.cjs","sources":["../../../../src/lib/InputGroup/InputGroup.tsx"],"sourcesContent":["import {\n    forwardRef,\n    Children,\n    cloneElement,\n    isValidElement,\n    type ReactElement,\n    type FieldsetHTMLAttributes,\n    useMemo,\n} from 'react';\nimport classNames from 'classnames';\n\nimport type {LibraryProps, DataAttributes} from '@/internal/LibraryAPI';\n\nimport classes from './InputGroup.module.css';\n\ntype ChildProps = {\n    name?: Props['name'];\n    disabled?: Props['disabled'];\n    required?: Props['required'];\n    id?: Props['id'];\n};\n\nexport type Props = DataAttributes &\n    LibraryProps & {\n        /**\n         * Set a label text for the group\n         */\n        label?: string;\n        children: ReactElement<ChildProps & unknown>[];\n        /**\n         * Provide a name for each input control in the group\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name\n         */\n        name: string;\n        /**\n         * Disable all inputs in the group\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled\n         */\n        disabled?: FieldsetHTMLAttributes<HTMLFieldSetElement>['disabled'];\n        /**\n         * Make all inputs in the group required\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required\n         */\n        required?: boolean;\n        /**\n         * Set a text for the hint displayed below the group\n         */\n        hint?: string;\n    };\n\nexport const InputGroup = forwardRef<HTMLFieldSetElement, Props>(\n    ({className, id, label, children, name, disabled, hint, required, ...nativeProps}, ref) => {\n        const childrenWithProps = useMemo(() => {\n            return Children.map(children, element => {\n                if (isValidElement(element)) {\n                    const nextProps = {name} as ChildProps;\n                    /* Check if own prop is set and child doesn't have the same prop */\n                    if (disabled !== undefined && typeof element.props.disabled !== 'boolean') {\n                        nextProps.disabled = disabled;\n                    }\n                    if (required !== undefined && typeof element.props.required !== 'boolean') {\n                        nextProps.required = required;\n                    }\n                    return cloneElement<ChildProps>(element, nextProps);\n                }\n                return element;\n            });\n        }, [children, disabled, name, required]);\n        return (\n            <fieldset\n                {...nativeProps}\n                className={classNames(classes.wrapper, className)}\n                disabled={disabled}\n                id={id}\n                ref={ref}>\n                <legend className={classNames(classes.legend, {[classes.disabled]: disabled})}>\n                    {label}\n                </legend>\n                <div className={classes.inputs}>{childrenWithProps}</div>\n                {hint && <div className={classes.hint}>{hint}</div>}\n            </fieldset>\n        );\n    }\n);\n\nInputGroup.displayName = 'InputGroup';\n"],"names":["InputGroup","forwardRef","className","id","label","children","name","disabled","hint","required","nativeProps","ref","childrenWithProps","useMemo","Children","element","isValidElement","nextProps","cloneElement","jsxs","classNames","classes","jsx"],"mappings":"sNAkDaA,EAAaC,EAAA,WACtB,CAAC,CAAC,UAAAC,EAAW,GAAAC,EAAI,MAAAC,EAAO,SAAAC,EAAU,KAAAC,EAAM,SAAAC,EAAU,KAAAC,EAAM,SAAAC,EAAU,GAAGC,CAAA,EAAcC,IAAQ,CACjF,MAAAC,EAAoBC,EAAAA,QAAQ,IACvBC,WAAS,IAAIT,EAAqBU,GAAA,CACjC,GAAAC,EAAAA,eAAeD,CAAO,EAAG,CACnB,MAAAE,EAAY,CAAC,KAAAX,CAAI,EAEvB,OAAIC,IAAa,QAAa,OAAOQ,EAAQ,MAAM,UAAa,YAC5DE,EAAU,SAAWV,GAErBE,IAAa,QAAa,OAAOM,EAAQ,MAAM,UAAa,YAC5DE,EAAU,SAAWR,GAElBS,EAAA,aAAyBH,EAASE,CAAS,CAAA,CAE/C,OAAAF,CAAA,CACV,EACF,CAACV,EAAUE,EAAUD,EAAMG,CAAQ,CAAC,EAEnC,OAAAU,EAAA,KAAC,WAAA,CACI,GAAGT,EACJ,UAAWU,EAAWC,UAAQ,QAASnB,CAAS,EAChD,SAAAK,EACA,GAAAJ,EACA,IAAAQ,EACA,SAAA,CAAAW,EAAAA,IAAC,SAAO,CAAA,UAAWF,EAAWC,EAAA,QAAQ,OAAQ,CAAC,CAACA,EAAA,QAAQ,QAAQ,EAAGd,CAAQ,CAAC,EACvE,SACLH,CAAA,CAAA,EACCkB,EAAA,IAAA,MAAA,CAAI,UAAWD,EAAA,QAAQ,OAAS,SAAkBT,EAAA,EAClDJ,GAASc,EAAAA,IAAA,MAAA,CAAI,UAAWD,EAAAA,QAAQ,KAAO,SAAKb,CAAA,CAAA,CAAA,CAAA,CACjD,CAAA,CAGZ,EAEAR,EAAW,YAAc"}