@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
39 lines (38 loc) • 1.64 kB
JavaScript
import { HvTypography } from "../../Typography/Typography.js";
import { setId } from "../../utils/setId.js";
import { HvFormElementContext } from "../context.js";
import { findDescriptors } from "../utils.js";
import { useClasses } from "./Label.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useContext, useMemo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/FormElement/Label/Label.tsx
/**
* Provides the user with a recognizable name for a given form element.
*/
var HvLabel = (props) => {
const { id: idProp, classes: classesProp, className, children, label, showGutter, disabled: disabledProp, required: requiredProp, htmlFor: htmlForProp, ...others } = useDefaultProps("HvLabel", props);
const { classes, cx } = useClasses(classesProp);
const context = useContext(HvFormElementContext);
const disabled = disabledProp ?? context.disabled;
const required = requiredProp ?? context.required;
const id = idProp ?? setId(context.id, "label");
const forId = useMemo(() => htmlForProp || findDescriptors(children)?.input?.[0]?.id, [children, htmlForProp]);
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(HvTypography, {
id,
className: cx(classes.root, {
[classes.labelDisabled]: disabled,
[classes.childGutter]: showGutter || children && label
}, className),
variant: "label",
component: "label",
htmlFor: forId,
...others,
children: [label, required && /* @__PURE__ */ jsx("span", {
"aria-hidden": "true",
children: "*"
})]
}), children] });
};
//#endregion
export { HvLabel };