@hitachivantara/uikit-react-core/dist/cjs/CheckBox/CheckBox.cjs

Core React components for the NEXT Design System.

"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 CheckBox_styles = require("./CheckBox.styles.cjs");
const BaseCheckBox = require("../BaseCheckBox/BaseCheckBox.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 HvCheckBox = React.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
    } = uikitReactUtils.useDefaultProps("HvCheckBox", props);
    const { classes, cx } = CheckBox_styles.useClasses(classesProp);
    const elementId = useUniqueId.useUniqueId(id);
    const [focusVisible, setFocusVisible] = React.useState(false);
    const [validationState, setValidationState] = useControlled.useControlled(
      status,
      "standBy"
    );
    const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
    const [isChecked, setIsChecked] = useControlled.useControlled(
      checked,
      Boolean(defaultChecked)
    );
    const [isIndeterminate, setIsIndeterminate] = useControlled.useControlled(
      checked !== void 0 ? indeterminate : void 0,
      Boolean(indeterminate)
    );
    const isStateInvalid = utils.isInvalid(validationState);
    const onChangeCallback = React.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.setId(elementId, "error") : ariaErrorMessage;
    }
    const checkbox = /* @__PURE__ */ jsxRuntime.jsx(
      BaseCheckBox.HvBaseCheckBox,
      {
        ref,
        id: hasLabel ? setId.setId(elementId, "input") : setId.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__ */ jsxRuntime.jsxs(
      FormElement.HvFormElement,
      {
        id,
        name,
        status: validationState,
        disabled,
        required,
        readOnly,
        className: cx(
          classes.root,
          { [classes.focusVisible]: !!(focusVisible && label) },
          className
        ),
        children: [
          hasLabel ? /* @__PURE__ */ jsxRuntime.jsxs(
            "div",
            {
              className: cx(classes.container, {
                [classes.disabled]: disabled,
                [classes.invalidContainer]: isStateInvalid
              }),
              children: [
                checkbox,
                /* @__PURE__ */ jsxRuntime.jsx(
                  Label.HvLabel,
                  {
                    noWrap: true,
                    id: setId.setId(elementId, "label"),
                    htmlFor: setId.setId(elementId, "input"),
                    label,
                    className: classes.label,
                    ...labelProps
                  }
                )
              ]
            }
          ) : checkbox,
          canShowError && /* @__PURE__ */ jsxRuntime.jsx(
            WarningText.HvWarningText,
            {
              id: setId.setId(elementId, "error"),
              disableAdornment: !hasLabel,
              hideText: !hasLabel,
              children: validationMessage
            }
          )
        ]
      }
    );
  }
);
exports.checkBoxClasses = CheckBox_styles.staticClasses;
exports.HvCheckBox = HvCheckBox;