@hitachivantara/uikit-react-core/dist/FormElement/WarningText/WarningText.js

UI Kit Core React components.

import { setId } from "../../utils/setId.js";
import { HvFormElementContext } from "../context.js";
import { HvIcon } from "../../icons.js";
import { useClasses } from "./WarningText.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useContext } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/FormElement/WarningText/WarningText.tsx
/**
* Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.
*/
var HvWarningText = (props) => {
	const { children, adornment: adornmentProp, isVisible: isVisibleProp, classes: classesProp, className, id: idProp, disabled: disabledProp, disableGutter, disableBorder, disableAdornment, hideText, ...others } = useDefaultProps("HvWarningText", props);
	const { classes, cx } = useClasses(classesProp);
	const context = useContext(HvFormElementContext);
	const disabled = disabledProp ?? context.disabled;
	const visible = isVisibleProp ?? context.status === "invalid";
	const id = idProp ?? setId(context.id, "error");
	const showWarning = visible && !disabled;
	const adornment = adornmentProp || /* @__PURE__ */ jsx(HvIcon, {
		name: "Fail",
		size: "xs",
		className: classes.defaultIcon
	});
	return /* @__PURE__ */ jsxs("div", {
		className: cx(classes.root, {
			[classes.show]: showWarning,
			[classes.topBorder]: !disableBorder
		}, className),
		children: [!disableAdornment && adornment, /* @__PURE__ */ jsx("span", {
			id,
			className: cx(classes.warningText, {
				[classes.topGutter]: !disableGutter,
				[classes.hideText]: hideText
			}),
			role: "status",
			"aria-live": "polite",
			"aria-relevant": "additions text",
			...others,
			children: showWarning && children
		})]
	});
};
//#endregion
export { HvWarningText };