@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
85 lines • 2.02 kB
JavaScript
import { c as _c } from "react-compiler-runtime";
import classNames from "classnames";
import { forwardRef } from "react";
import { jsx as _jsx } from "react/jsx-runtime";
/**
* Display feedback for a group of inputs, radio buttons or a button group.
*
* Equivalent to `feedback` prop for `<Input>`, `<TextArea>`, `<DatePicker>`,
* `<Select>`, and `<FieldGroup>`.
*
* @see https://bifrost.intility.com/react/feedback
*
* @example
* <Feedback>Feedback text</Feedback>
*
* <Feedback state="alert">Red feedback text</Feedback>
*
* // Pass an empty string to reserve space (to avoid jumping UI)
* <Feedback>{""}</Feedback>
*
* // connect to an input using `aria-describedby`
* <input aria-describedby="my-feedback-id" type="text" />
* <Feedback id="my-feedback-id">Feedback text</Feedback>
*/
const Feedback = /*#__PURE__*/forwardRef((t0, ref) => {
const $ = _c(13);
let children;
let className;
let props;
let t1;
if ($[0] !== t0) {
({
children,
className,
state: t1,
...props
} = t0);
$[0] = t0;
$[1] = children;
$[2] = className;
$[3] = props;
$[4] = t1;
} else {
children = $[1];
className = $[2];
props = $[3];
t1 = $[4];
}
const state = t1 === undefined ? "default" : t1;
if (children === undefined || children == null) {
return null;
}
const t2 = state === "alert";
let t3;
if ($[5] !== className || $[6] !== t2) {
t3 = classNames(className, "bf-label-feedback", {
"bfc-alert": t2
});
$[5] = className;
$[6] = t2;
$[7] = t3;
} else {
t3 = $[7];
}
const t4 = children || "\xA0";
let t5;
if ($[8] !== props || $[9] !== ref || $[10] !== t3 || $[11] !== t4) {
t5 = /*#__PURE__*/_jsx("div", {
...props,
ref: ref,
className: t3,
children: t4
});
$[8] = props;
$[9] = ref;
$[10] = t3;
$[11] = t4;
$[12] = t5;
} else {
t5 = $[12];
}
return t5;
});
Feedback.displayName = "Feedback";
export default Feedback;