@hitachivantara/uikit-react-core/dist/esm/CheckBox/CheckBox.js

Core React components for the NEXT Design System.

import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef, useState, useCallback } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useControlled } from "../hooks/useControlled.js";
import { useUniqueId } from "../hooks/useUniqueId.js";
import { setId } from "../utils/setId.js";
import { useClasses } from "./CheckBox.styles.js";
import { staticClasses } from "./CheckBox.styles.js";
import { HvBaseCheckBox } from "../BaseCheckBox/BaseCheckBox.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";
const HvCheckBox = forwardRef(
  function HvCheckBox2(props, ref) {
    const {
      id,
      classes: classesProp,
      className,
      name,
      checked,
      status,
      indeterminate,
      statusMessage,
      label,
      labelProps,
      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.focusVisible]: !!(focusVisible && label) },
          className
        ),
        children: [
          hasLabel ? /* @__PURE__ */ jsxs(
            "div",
            {
              className: cx(classes.container, {
                [classes.disabled]: disabled,
                [classes.invalidContainer]: isStateInvalid
              }),
              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
            }
          )
        ]
      }
    );
  }
);
export {
  HvCheckBox,
  staticClasses as checkBoxClasses
};