@mskcc/carbon-react/es/components/Checkbox/Checkbox.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import PropTypes from 'prop-types';
import React__default from 'react';
import cx from 'classnames';
import { usePrefix } from '../../internal/usePrefix.js';
import setupGetInstanceId from '../../tools/setupGetInstanceId.js';

const getInstanceId = setupGetInstanceId();
const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
  let {
    className,
    helperText,
    id,
    labelText,
    onChange = () => {},
    onClick,
    indeterminate = false,
    invalid,
    invalidText,
    hideLabel,
    readOnly,
    title = '',
    warn,
    warnText,
    disableFocus,
    ...other
  } = _ref;
  const prefix = usePrefix();
  const showWarning = !readOnly && !invalid && warn;
  const showHelper = !invalid && !warn;
  const checkboxGroupInstanceId = getInstanceId();
  const helperId = !helperText ? undefined : `checkbox-helper-text-${checkboxGroupInstanceId}`;
  const helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
    id: helperId,
    className: `${prefix}--form__helper-text`
  }, helperText) : null;
  const wrapperClasses = cx(`${prefix}--form-item`, `${prefix}--checkbox-wrapper`, className, {
    [`${prefix}--checkbox-wrapper--readonly`]: readOnly,
    [`${prefix}--checkbox-wrapper--invalid`]: !readOnly && invalid,
    [`${prefix}--checkbox-wrapper--warning`]: showWarning,
    ['msk-checkbox--disable-focus']: disableFocus
  });
  const innerLabelClasses = cx(`${prefix}--checkbox-label-text`, {
    [`${prefix}--visually-hidden`]: hideLabel
  });
  return /*#__PURE__*/React__default.createElement("div", {
    className: wrapperClasses
  }, /*#__PURE__*/React__default.createElement("input", _extends({}, other, {
    type: "checkbox",
    "data-invalid": invalid ? true : undefined,
    onChange: evt => {
      if (!readOnly && onChange) {
        onChange(evt, {
          checked: evt.target.checked,
          id
        });
      }
    },
    className: `${prefix}--checkbox`,
    id: id,
    ref: el => {
      if (el) {
        el.indeterminate = indeterminate ?? false;
      }
      if (typeof ref === 'function') {
        ref(el);
      } else if (ref && Object(ref) === ref) {
        ref.current = el;
      }
    }
    // readonly attribute not applicable to type="checkbox"
    // see - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
    ,
    "aria-readonly": readOnly,
    onClick: evt => {
      if (readOnly) {
        // prevent default stops the checkbox being updated
        evt.preventDefault();
      }
      // pass onClick event on to the user even if readonly
      if (onClick) {
        onClick(evt);
      }
    }
  })), /*#__PURE__*/React__default.createElement("label", {
    htmlFor: id,
    className: `${prefix}--checkbox-label`,
    title: title
  }, /*#__PURE__*/React__default.createElement("span", {
    className: innerLabelClasses
  }, labelText)), /*#__PURE__*/React__default.createElement("div", {
    className: `${prefix}--checkbox__validation-msg`
  }, !readOnly && invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
    className: `${prefix}--checkbox__invalid-icon msk-icon`
  }, "error"), /*#__PURE__*/React__default.createElement("div", {
    className: `${prefix}--form-requirement`
  }, invalidText)), showWarning && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
    className: `${prefix}--checkbox__invalid-icon ${prefix}--checkbox__invalid-icon--warning msk-icon`
  }, "warning"), /*#__PURE__*/React__default.createElement("div", {
    className: `${prefix}--form-requirement`
  }, warnText))), showHelper && helper);
});
Checkbox.propTypes = {
  /**
   * Specify whether the underlying input should be checked
   */
  checked: PropTypes.bool,
  /**
   * Specify an optional className to be applied to the <label> node
   */
  className: PropTypes.string,
  /**
   * Specify whether the underlying input should be checked by default
   */
  defaultChecked: PropTypes.bool,
  /**
   * Specify whether the Checkbox is currently in warning state
   */
  //   warn: PropTypes.bool,

  /**
   * Provide the text that is displayed when the Checkbox is in warning state
   */
  //   warnText: PropTypes.node,
  /**
   * Specify whether the Checkbox should be disabled from focus
   */
  disableFocus: PropTypes.bool,
  /**
   * Specify whether the Checkbox should be disabled
   */
  disabled: PropTypes.bool,
  /**
   * Provide text for the form group for additional help
   */
  helperText: PropTypes.node,
  /**
   * Specify whether the label should be hidden, or not
   */
  hideLabel: PropTypes.bool,
  /**
   * Provide an `id` to uniquely identify the Checkbox input
   */
  id: PropTypes.string.isRequired,
  /**
   * Specify whether the Checkbox is in an indeterminate state
   */
  indeterminate: PropTypes.bool,
  /**
   * Specify whether the Checkbox is currently invalid
   */
  invalid: PropTypes.bool,
  /**
   * Provide the text that is displayed when the Checkbox is in an invalid state
   */
  invalidText: PropTypes.node,
  /**
   * Provide a label to provide a description of the Checkbox input that you are
   * exposing to the user
   */
  labelText: PropTypes.node.isRequired,
  /**
   * Provide an optional handler that is called when the internal state of
   * Checkbox changes. This handler is called with event and state info.
   * `(event, { checked, id }) => void`
   */
  onChange: PropTypes.func,
  /**
   * Specify whether the Checkbox is read-only
   */
  readOnly: PropTypes.bool,
  /**
   * Specify a title for the <label> node for the Checkbox
   */
  title: PropTypes.string
};
Checkbox.displayName = 'Checkbox';

export { Checkbox as default };