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

UI Kit Core React components.

import { HvButtonBase } from "../../ButtonBase/ButtonBase.js";
import { HvFormElementContext, HvFormElementDescriptorsContext } from "../context.js";
import { useClasses } from "./Adornment.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useContext } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/FormElement/Adornment/Adornment.tsx
/**
* Allows to add a decorative icon or an action to a form element, usually on the right side of an input.
* E.g., the reveal password button.
*
* This component disables keyboard navigation by default, ensuring that it doesn't steal focus from the input.
* As such, its functionality, if any, for accessibility purposes must be provided through an alternative mean.
* This behavior can be overridden by providing an a `tabIndex={0}`.
*/
var HvAdornment = forwardRef(function HvAdornment(props, ref) {
	const { classes: classesProp, className, icon, showWhen, onClick, isVisible, tabIndex, ...others } = useDefaultProps("HvAdornment", props);
	const { classes, cx } = useClasses(classesProp);
	const { status, disabled } = useContext(HvFormElementContext);
	const { input } = useContext(HvFormElementDescriptorsContext);
	const displayIcon = isVisible ?? (showWhen == null || status === showWhen);
	return /* @__PURE__ */ jsx(onClick ? HvButtonBase : "div", {
		ref,
		"aria-hidden": tabIndex == null || tabIndex < 0 ? true : void 0,
		className: cx(classes.root, {
			[classes.hideIcon]: !displayIcon,
			[classes.disabled]: disabled
		}, className),
		...onClick && {
			disabled,
			tabIndex: tabIndex ?? -1,
			"aria-controls": input?.[0]?.id,
			onClick,
			onMouseDown: (event) => event.preventDefault()
		},
		...others,
		children: icon
	});
});
//#endregion
export { HvAdornment };