@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
1 lines • 5.73 kB
Source Map (JSON)
{"version":3,"sources":["../src/form/input-group/input-group.tsx"],"sourcesContent":["import { useId, forwardRef, Children, isValidElement, cloneElement } from \"react\";\nimport type { LabelHTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ValidationMessage, type ValidationMessageProps } from \"../validation-message\";\nimport { type ErrorMessageProps } from \"../error-message\";\nimport { getValidationMessageValue } from \"../../utils\";\n\ninterface InputProps {\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: boolean;\n id?: string;\n className?: string;\n}\n\nexport interface InputGroupProps {\n id?: string;\n className?: string;\n style?: CSSProperties;\n \"data-color\"?: \"info\" | \"success\" | \"warning\" | \"error\";\n size?: \"large\" | \"small\";\n validationMessage?: ReactNode | { value: ReactNode };\n validationMessageProps?: Partial<ValidationMessageProps>;\n /** @deprecated Use `validationMessage` instead */\n errorMessage?: ReactNode;\n /** @deprecated Use `validationMessageProps` instead */\n errorMessageProps?: Partial<ErrorMessageProps>;\n labelProps?: LabelHTMLAttributes<HTMLLabelElement>;\n label?: ReactNode;\n disabled?: boolean;\n readOnly?: boolean;\n /**\n * `children` must be either a single input element or a render function.\n *\n * If you use a render function, make sure you spread the input props to the appropriate element.\n */\n children: Exclude<ReactNode, Iterable<ReactNode>> | ((inputProps: InputProps) => ReactNode);\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n {\n id,\n className,\n style,\n \"data-color\": dataColor = undefined,\n size = \"large\",\n validationMessage,\n validationMessageProps,\n errorMessage,\n errorMessageProps,\n labelProps: { className: labelClassName, ...labelProps } = {},\n label,\n disabled,\n readOnly,\n children,\n ...rest\n },\n ref,\n) {\n const validationMessageId = useId();\n const inputId = useId();\n const validationColor = errorMessage ? \"error\" : dataColor;\n const validationMessageValue = getValidationMessageValue(validationMessage, errorMessage);\n\n const renderInput = () => {\n const inputProps: InputProps = {\n \"aria-describedby\": validationMessage ? validationMessageId : undefined,\n \"aria-invalid\": errorMessage ? true : undefined,\n id: id ?? inputId,\n className: clsx(\"hds-input-group__input\"),\n };\n\n if (typeof children === \"function\") {\n return children(inputProps);\n }\n\n const input: ReactNode = Children.toArray(children)[0];\n\n if (!isValidElement<InputProps>(input)) {\n return;\n }\n\n return cloneElement<InputProps>(input, {\n ...inputProps,\n ...input.props,\n className: `${inputProps.className} ${input.props.className ?? \"\"}`,\n });\n };\n\n return (\n <div\n className={clsx(\n \"hds-input-group\",\n {\n [`hds-input-group--${size}`]: size,\n },\n className as undefined,\n )}\n ref={ref}\n style={style}\n data-color={validationColor}\n {...rest}\n >\n {label !== null && label !== undefined && label !== false && (\n <label\n className={clsx(\"hds-input-group__label\", labelClassName as undefined)}\n {...labelProps}\n htmlFor={id ?? inputId}\n >\n {label}\n </label>\n )}\n <div\n className={clsx(\"hds-input-group__input-wrapper\")}\n data-disabled={disabled}\n data-readonly={readOnly}\n >\n {renderInput()}\n </div>\n <ValidationMessage\n id={validationMessageId}\n {...(validationMessageProps ?? errorMessageProps)}\n >\n {validationMessageValue}\n </ValidationMessage>\n </div>\n );\n});\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,OAAO,YAAY,UAAU,gBAAgB,oBAAoB;AAE1E,SAAS,YAAY;AAuFjB,SAcI,KAdJ;AAnDG,IAAM,aAAa,WAA4C,SAASA,YAC7E,IAiBA,KACA;AAlBA,eAUc;AAAA,IATZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc,YAAY;AAAA,IAC1B,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY,KAA+C,CAAC;AAAA,EAjDhE,IAuCE,IAUc,SAAE,aAAW,eAjD7B,IAiDgB,IAAgC,uBAAhC,IAAgC,CAA9B,eAVhB,SAWE;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EArDJ,IAuCE,IAeK,iBAfL,IAeK;AAAA,IAdH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,sBAAsB,MAAM;AAClC,QAAM,UAAU,MAAM;AACtB,QAAM,kBAAkB,eAAe,UAAU;AACjD,QAAM,yBAAyB,0BAA0B,mBAAmB,YAAY;AAExF,QAAM,cAAc,MAAM;AA/D5B,QAAAC;AAgEI,UAAM,aAAyB;AAAA,MAC7B,oBAAoB,oBAAoB,sBAAsB;AAAA,MAC9D,gBAAgB,eAAe,OAAO;AAAA,MACtC,IAAI,kBAAM;AAAA,MACV,WAAW,KAAK,wBAAwB;AAAA,IAC1C;AAEA,QAAI,OAAO,aAAa,YAAY;AAClC,aAAO,SAAS,UAAU;AAAA,IAC5B;AAEA,UAAM,QAAmB,SAAS,QAAQ,QAAQ,EAAE,CAAC;AAErD,QAAI,CAAC,eAA2B,KAAK,GAAG;AACtC;AAAA,IACF;AAEA,WAAO,aAAyB,OAAO,gDAClC,aACA,MAAM,QAF4B;AAAA,MAGrC,WAAW,GAAG,WAAW,SAAS,KAAIA,MAAA,MAAM,MAAM,cAAZ,OAAAA,MAAyB,EAAE;AAAA,IACnE,EAAC;AAAA,EACH;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,CAAC,oBAAoB,IAAI,EAAE,GAAG;AAAA,QAChC;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAY;AAAA,OACR,OAXL;AAAA,MAaE;AAAA,kBAAU,QAAQ,UAAU,UAAa,UAAU,SAClD;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,0BAA0B,cAA2B;AAAA,aACjE,aAFL;AAAA,YAGC,SAAS,kBAAM;AAAA,YAEd;AAAA;AAAA,QACH;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,gCAAgC;AAAA,YAChD,iBAAe;AAAA,YACf,iBAAe;AAAA,YAEd,sBAAY;AAAA;AAAA,QACf;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,aACC,0DAA0B,oBAFhC;AAAA,YAIE;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["InputGroup","_a"]}