@carbon/react/lib/components/InlineCheckbox/InlineCheckbox.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var PropTypes = require('prop-types');
var React = require('react');
var deprecate = require('../../prop-types/deprecate.js');
var usePrefix = require('../../internal/usePrefix.js');
var useMergedRefs = require('../../internal/useMergedRefs.js');

// eslint-disable-next-line react/display-name -- https://github.com/carbon-design-system/carbon/issues/20452
const InlineCheckbox = /*#__PURE__*/React.forwardRef((props, forwardRef) => {
  const {
    ['aria-label']: ariaLabel,
    ariaLabel: deprecatedAriaLabel,
    checked = false,
    disabled,
    id,
    indeterminate,
    name,
    onChange = () => {},
    onClick,
    onKeyDown,
    title
  } = props;
  const prefix = usePrefix.usePrefix();
  const inputRef = React.useRef(null);
  const ref = useMergedRefs.useMergedRefs([inputRef, forwardRef]);
  const inputProps = {
    checked,
    className: `${prefix}--checkbox`,
    disabled,
    id,
    name,
    onClick: onClick ? onClickCheckBoxInput : onClick,
    onChange: evt => {
      onChange(evt.target.checked, id, evt);
    },
    onKeyDown,
    ref,
    type: 'checkbox'
  };
  if (indeterminate) {
    inputProps.checked = false;
  }
  React.useEffect(() => {
    if (inputRef?.current) {
      inputRef.current.indeterminate = indeterminate || false;
    }
  }, [indeterminate]);
  function onClickCheckBoxInput(evt) {
    if (indeterminate) {
      evt.target.checked = false;
    }
    onClick?.(evt);
  }
  return /*#__PURE__*/React.createElement("div", {
    className: `${prefix}--checkbox--inline`
  }, /*#__PURE__*/React.createElement("input", inputProps),
  /*#__PURE__*/
  /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
  React.createElement("label", {
    htmlFor: id,
    className: `${prefix}--checkbox-label`,
    title: title,
    onClick: evt => {
      evt.stopPropagation();
    }
  }, /*#__PURE__*/React.createElement("span", {
    className: `${prefix}--visually-hidden`
  }, deprecatedAriaLabel || ariaLabel)));
});
InlineCheckbox.propTypes = {
  /**
   * Specify the label for the control
   */
  ['aria-label']: PropTypes.string.isRequired,
  /**
   * Deprecated, please use `aria-label` instead.
   * Specify the label for the control
   */
  ariaLabel: deprecate.deprecate(PropTypes.string.isRequired, 'The `ariaLabel` prop has been deprecated in favor of `aria-label`. This prop will be removed in the next major release.'),
  /**
   * Specify whether the underlying control is checked, or not
   */
  checked: PropTypes.bool,
  /**
   * Specify whether the underlying input control should be disabled
   */
  disabled: PropTypes.bool,
  /**
   * Provide an `id` for the underlying input control
   */
  id: PropTypes.string.isRequired,
  /**
   * Specify whether the control is in an indeterminate state
   */
  indeterminate: PropTypes.bool,
  /**
   * Provide a `name` for the underlying input control
   */
  name: PropTypes.string.isRequired,
  /**
   * Provide an optional hook that is called each time the input is updated
   */
  onChange: PropTypes.func,
  /**
   * Provide a handler that is invoked when a user clicks on the control
   */
  onClick: PropTypes.func,
  /**
   * Provide a handler that is invoked on the key down event for the control
   */
  onKeyDown: PropTypes.func,
  /**
   * Provide an optional tooltip for the InlineCheckbox
   */
  title: PropTypes.string
};

exports.default = InlineCheckbox;