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

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { forwardRef, useState, useCallback } from "react";
import MuiCheckbox from "@mui/material/Checkbox";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useClasses } from "./BaseCheckBox.styles.js";
import { staticClasses } from "./BaseCheckBox.styles.js";
import { HvCheckBoxIcon } from "./CheckBoxIcon.js";
const HvBaseCheckBox = forwardRef(function HvBaseCheckBox2(props, ref) {
  const {
    classes: classesProp,
    className,
    inputProps,
    onChange,
    onFocusVisible,
    onBlur,
    checked,
    indeterminate,
    defaultChecked,
    value = "on",
    required = false,
    readOnly = false,
    disabled = false,
    semantic = false,
    color,
    style,
    ...others
  } = useDefaultProps("HvBaseCheckBox", props);
  const { classes, cx } = useClasses(classesProp);
  const [focusVisible, setFocusVisible] = useState(false);
  const onChangeCallback = useCallback(
    (event) => {
      if (readOnly) {
        return;
      }
      onChange?.(event, event.target.checked, value);
    },
    [onChange, readOnly, value]
  );
  const onBlurCallback = useCallback(
    (event) => {
      setFocusVisible(false);
      onBlur?.(event);
    },
    [onBlur]
  );
  const onFocusVisibleCallback = useCallback(
    (event) => {
      setFocusVisible(true);
      onFocusVisible?.(event);
    },
    [onFocusVisible]
  );
  const params = { indeterminate, disabled, semantic, color };
  return /* @__PURE__ */ jsx(
    MuiCheckbox,
    {
      ref,
      value,
      className: cx(
        classes.root,
        {
          [classes.focusVisible]: focusVisible,
          [classes.checked]: checked,
          [classes.indeterminate]: indeterminate,
          [classes.semantic]: semantic,
          [classes.disabled]: disabled
        },
        className
      ),
      icon: /* @__PURE__ */ jsx(HvCheckBoxIcon, { ...params }),
      indeterminateIcon: /* @__PURE__ */ jsx(HvCheckBoxIcon, { variant: "indeterminate", ...params }),
      checkedIcon: /* @__PURE__ */ jsx(HvCheckBoxIcon, { variant: "checked", ...params }),
      disabled,
      required,
      readOnly,
      checked,
      defaultChecked,
      indeterminate,
      inputProps,
      onChange: onChangeCallback,
      onFocusVisible: onFocusVisibleCallback,
      onBlur: onBlurCallback,
      color: "default",
      ...others
    }
  );
});
export {
  HvBaseCheckBox,
  staticClasses as baseCheckBoxClasses
};