@shopify/polaris/dist/esm/components/Checkbox/Checkbox.js

Shopify’s product component library

import { Key } from '../../types.js';
import React$1, { forwardRef, useRef, useState, useImperativeHandle } from 'react';
import { useFeatures } from '../../utilities/features/hooks.js';
import { useUniqueId } from '../../utilities/unique-id/hooks.js';
import { classNames } from '../../utilities/css.js';
import { MinusMinor, TickSmallMinor } from '@shopify/polaris-icons';
import { Icon as Icon$1 } from '../Icon/Icon.js';
import { useToggle as useToggle$1 } from '../../utilities/use-toggle.js';
import { errorTextID } from '../InlineError/InlineError.js';
import { Choice as Choice$1, helpTextID } from '../Choice/Choice.js';
import styles from './Checkbox.scss.js';

var Checkbox = /*#__PURE__*/forwardRef(function Checkbox({
  ariaDescribedBy: ariaDescribedByProp,
  label,
  labelHidden,
  checked = false,
  helpText,
  disabled,
  id: idProp,
  name,
  value,
  error,
  onChange,
  onFocus,
  onBlur
}, ref) {
  var inputNode = useRef(null);
  var {
    newDesignLanguage
  } = useFeatures();
  var id = useUniqueId('Checkbox', idProp);
  var {
    value: mouseOver,
    setTrue: handleMouseOver,
    setFalse: handleMouseOut
  } = useToggle$1(false);
  var [keyFocused, setKeyFocused] = useState(false);
  useImperativeHandle(ref, () => ({
    focus: () => {
      if (inputNode.current) {
        inputNode.current.focus();
      }
    }
  }));

  var handleBlur = () => {
    onBlur && onBlur();
    setKeyFocused(false);
  };

  var handleInput = () => {
    if (onChange == null || inputNode.current == null || disabled) {
      return;
    }

    onChange(!inputNode.current.checked, id);
    inputNode.current.focus();
  };

  var handleKeyUp = event => {
    var {
      keyCode
    } = event;
    !keyFocused && setKeyFocused(true);

    if (keyCode === Key.Space) {
      handleInput();
    }
  };

  var describedBy = [];

  if (error && typeof error !== 'boolean') {
    describedBy.push(errorTextID(id));
  }

  if (helpText) {
    describedBy.push(helpTextID(id));
  }

  if (ariaDescribedByProp) {
    describedBy.push(ariaDescribedByProp);
  }

  var ariaDescribedBy = describedBy.length ? describedBy.join(' ') : undefined;
  var wrapperClassName = classNames(styles.Checkbox, error && styles.error, newDesignLanguage && styles.newDesignLanguage);
  var backdropClassName = classNames(styles.Backdrop, mouseOver && styles.hover);
  var isIndeterminate = checked === 'indeterminate';
  var isChecked = !isIndeterminate && Boolean(checked);
  var indeterminateAttributes = isIndeterminate ? {
    indeterminate: 'true',
    'aria-checked': 'mixed'
  } : {
    'aria-checked': isChecked
  };
  var iconSource = isIndeterminate ? MinusMinor : TickSmallMinor;
  var inputClassName = classNames(styles.Input, isIndeterminate && styles['Input-indeterminate'], newDesignLanguage && keyFocused && styles.keyFocused);
  return (
    /*#__PURE__*/

    /* eslint-disable jsx-a11y/no-redundant-roles */
    React$1.createElement(Choice$1, {
      id: id,
      label: label,
      labelHidden: labelHidden,
      helpText: helpText,
      error: error,
      disabled: disabled,
      onClick: handleInput,
      onMouseOver: handleMouseOver,
      onMouseOut: handleMouseOut
    }, /*#__PURE__*/React$1.createElement("span", {
      className: wrapperClassName
    }, /*#__PURE__*/React$1.createElement("input", Object.assign({
      onKeyUp: handleKeyUp,
      ref: inputNode,
      id: id,
      name: name,
      value: value,
      type: "checkbox",
      checked: isChecked,
      disabled: disabled,
      className: inputClassName,
      onFocus: onFocus,
      onBlur: handleBlur,
      onClick: stopPropagation,
      onChange: noop,
      "aria-invalid": error != null,
      "aria-describedby": ariaDescribedBy,
      role: "checkbox"
    }, indeterminateAttributes)), /*#__PURE__*/React$1.createElement("span", {
      className: backdropClassName
    }), /*#__PURE__*/React$1.createElement("span", {
      className: styles.Icon
    }, /*#__PURE__*/React$1.createElement(Icon$1, {
      source: iconSource
    }))))
    /* eslint-enable jsx-a11y/no-redundant-roles */

  );
});

function noop() {}

function stopPropagation(event) {
  event.stopPropagation();
}

export { Checkbox };