@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
148 lines (147 loc) • 4.83 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const useControlled = require("../hooks/useControlled.cjs");
const useUniqueId = require("../hooks/useUniqueId.cjs");
const setId = require("../utils/setId.cjs");
const Radio_styles = require("./Radio.styles.cjs");
const BaseRadio = require("../BaseRadio/BaseRadio.cjs");
const utils = require("../FormElement/utils.cjs");
const FormElement = require("../FormElement/FormElement.cjs");
const Label = require("../FormElement/Label/Label.cjs");
const WarningText = require("../FormElement/WarningText/WarningText.cjs");
const HvRadio = React.forwardRef(
function HvRadio2(props, ref) {
const {
classes: classesProp,
className,
id,
name,
value = "on",
required,
readOnly,
disabled,
label,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-describedby": ariaDescribedBy,
labelProps,
checked,
defaultChecked = false,
onChange,
status = "standBy",
statusMessage,
"aria-errormessage": ariaErrorMessage,
semantic,
inputProps,
onFocusVisible,
onBlur,
...others
} = uikitReactUtils.useDefaultProps("HvRadio", props);
const { classes, cx } = Radio_styles.useClasses(classesProp);
const elementId = useUniqueId.useUniqueId(id);
const [focusVisible, setFocusVisible] = React.useState(false);
const onFocusVisibleCallback = React.useCallback(
(evt) => {
setFocusVisible(true);
onFocusVisible?.(evt);
},
[onFocusVisible]
);
const onBlurCallback = React.useCallback(
(evt) => {
setFocusVisible(false);
onBlur?.(evt);
},
[onBlur]
);
const [isChecked, setIsChecked] = useControlled.useControlled(checked, defaultChecked);
const onLocalChange = React.useCallback(
(evt, newChecked) => {
setIsChecked(newChecked);
onChange?.(evt, newChecked, value);
},
[onChange, setIsChecked, value]
);
const canShowError = ariaErrorMessage == null && status !== void 0 && statusMessage !== void 0;
const hasLabel = label != null;
const isStateInvalid = utils.isInvalid(status);
let errorMessageId;
if (isStateInvalid) {
errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
}
const radio = /* @__PURE__ */ jsxRuntime.jsx(
BaseRadio.HvBaseRadio,
{
ref,
id: label ? setId.setId(elementId, "input") : setId.setId(id, "input"),
name,
className: cx(classes.radio, {
[classes.invalidRadio]: isStateInvalid
}),
disabled,
readOnly,
onChange: onLocalChange,
value,
checked: isChecked,
semantic,
inputProps: {
"aria-invalid": isStateInvalid ? true : void 0,
"aria-errormessage": errorMessageId,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-describedby": ariaDescribedBy,
...inputProps
},
onFocusVisible: onFocusVisibleCallback,
onBlur: onBlurCallback,
...others
}
);
return /* @__PURE__ */ jsxRuntime.jsxs(
FormElement.HvFormElement,
{
id,
name,
status: status || "standBy",
disabled,
required,
readOnly,
className: cx(classes.root, className),
children: [
hasLabel ? /* @__PURE__ */ jsxRuntime.jsxs(
"div",
{
className: cx(classes.container, {
[classes.disabled]: disabled,
[classes.focusVisible]: !!(focusVisible && label),
[classes.invalidContainer]: isStateInvalid,
[classes.checked]: isChecked,
[classes.semantic]: semantic
}),
children: [
radio,
/* @__PURE__ */ jsxRuntime.jsx(
Label.HvLabel,
{
noWrap: true,
id: setId.setId(elementId, "label"),
htmlFor: setId.setId(elementId, "input"),
label,
className: classes.label,
...labelProps
}
)
]
}
) : radio,
canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(elementId, "error"), children: statusMessage })
]
}
);
}
);
exports.radioClasses = Radio_styles.staticClasses;
exports.HvRadio = HvRadio;