@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
117 lines (116 loc) • 4.54 kB
JavaScript
import { setId } from "../utils/setId.js";
import { useUniqueId } from "../hooks/useUniqueId.js";
import { isInvalid } from "../FormElement/utils.js";
import { HvFormElement } from "../FormElement/FormElement.js";
import { HvLabel } from "../FormElement/Label/Label.js";
import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
import { useControlled } from "../hooks/useControlled.js";
import { HvBaseCheckBox } from "../BaseCheckBox/BaseCheckBox.js";
import { useClasses } from "./CheckBox.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef, useCallback, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/CheckBox/CheckBox.tsx
/**
* A Checkbox lets users select one or more options.
* It’s commonly used in a Checkbox Group to present multiple choices, but can also be used individually to toggle a single option.
*/
var HvCheckBox = forwardRef(function HvCheckBox(props, ref) {
const { id, classes: classesProp, className, name, checked, status, indeterminate, statusMessage, label, labelProps, labelPosition = "right", inputProps, value = "on", required, readOnly, disabled, semantic, defaultChecked, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, onChange, onFocusVisible, onBlur, ...others } = useDefaultProps("HvCheckBox", props);
const { classes, cx } = useClasses(classesProp);
const elementId = useUniqueId(id);
const [focusVisible, setFocusVisible] = useState(false);
const [validationState, setValidationState] = useControlled(status, "standBy");
const [validationMessage] = useControlled(statusMessage, "Required");
const [isChecked, setIsChecked] = useControlled(checked, Boolean(defaultChecked));
const [isIndeterminate, setIsIndeterminate] = useControlled(checked !== void 0 ? indeterminate : void 0, Boolean(indeterminate));
const isStateInvalid = isInvalid(validationState);
const onChangeCallback = useCallback((event, newChecked) => {
setIsChecked(() => {
setIsIndeterminate(false);
if (required && !newChecked) setValidationState("invalid");
else setValidationState("valid");
return newChecked;
});
onChange?.(event, newChecked, value);
}, [
onChange,
required,
setIsChecked,
setIsIndeterminate,
setValidationState,
value
]);
const onFocusVisibleCallback = (event) => {
setFocusVisible(true);
onFocusVisible?.(event);
};
const onBlurCallback = (event) => {
setFocusVisible(false);
onBlur?.(event);
};
const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
const hasLabel = label != null;
let errorMessageId;
if (isStateInvalid) errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
const checkbox = /* @__PURE__ */ jsx(HvBaseCheckBox, {
ref,
id: hasLabel ? setId(elementId, "input") : setId(id, "input"),
name,
className: cx(classes.checkbox, {
[classes.invalidCheckbox]: !label && isStateInvalid,
[classes.checked]: isChecked,
[classes.indeterminate]: isIndeterminate,
[classes.semantic]: semantic
}),
disabled,
readOnly,
required,
onChange: onChangeCallback,
value,
checked: isChecked,
indeterminate: isIndeterminate,
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__ */ jsxs(HvFormElement, {
id,
name,
status: validationState,
disabled,
required,
readOnly,
className: cx(classes.root, classes[labelPosition], { [classes.focusVisible]: !!(focusVisible && label) }, className),
children: [hasLabel ? /* @__PURE__ */ jsxs("div", {
className: cx(classes.container, {
[classes.invalidContainer]: isStateInvalid,
[classes.disabled]: disabled
}),
children: [checkbox, /* @__PURE__ */ jsx(HvLabel, {
noWrap: true,
id: setId(elementId, "label"),
htmlFor: setId(elementId, "input"),
label,
className: classes.label,
...labelProps
})]
}) : checkbox, canShowError && /* @__PURE__ */ jsx(HvWarningText, {
id: setId(elementId, "error"),
disableAdornment: !hasLabel,
hideText: !hasLabel,
children: validationMessage
})]
});
});
//#endregion
export { HvCheckBox };