@primer/react/dist/Checkbox/Checkbox.js

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { clsx } from 'clsx';
import React, { useContext, useEffect } from 'react';
import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
import { CheckboxGroupContext } from '../CheckboxGroup/CheckboxGroupContext.js';
import classes from './Checkbox.module.css.js';
import sharedClasses from './shared.module.css.js';
import { jsx } from 'react/jsx-runtime';
import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';

/**
 * An accessible, native checkbox component
 */
const Checkbox = /*#__PURE__*/React.forwardRef((t0, ref) => {
  const $ = c(40);
  let checked;
  let className;
  let defaultChecked;
  let disabled;
  let indeterminate;
  let onChange;
  let required;
  let rest;
  let validationStatus;
  let value;
  if ($[0] !== t0) {
    ({
      checked,
      className,
      defaultChecked,
      indeterminate,
      disabled,
      onChange,
      required,
      validationStatus,
      value,
      ...rest
    } = t0);
    $[0] = t0;
    $[1] = checked;
    $[2] = className;
    $[3] = defaultChecked;
    $[4] = disabled;
    $[5] = indeterminate;
    $[6] = onChange;
    $[7] = required;
    $[8] = rest;
    $[9] = validationStatus;
    $[10] = value;
  } else {
    checked = $[1];
    className = $[2];
    defaultChecked = $[3];
    disabled = $[4];
    indeterminate = $[5];
    onChange = $[6];
    required = $[7];
    rest = $[8];
    validationStatus = $[9];
    value = $[10];
  }
  const checkboxRef = useProvidedRefOrCreate(ref);
  const checkboxGroupContext = useContext(CheckboxGroupContext);
  let t1;
  if ($[11] !== checkboxGroupContext || $[12] !== onChange) {
    t1 = e => {
      checkboxGroupContext.onChange && checkboxGroupContext.onChange(e);
      onChange && onChange(e);
    };
    $[11] = checkboxGroupContext;
    $[12] = onChange;
    $[13] = t1;
  } else {
    t1 = $[13];
  }
  const handleOnChange = t1;
  const t2 = indeterminate ? false : checked;
  const t3 = required ? "true" : "false";
  const t4 = validationStatus === "error" ? "true" : "false";
  let t5;
  if ($[14] !== checkboxRef || $[15] !== defaultChecked || $[16] !== disabled || $[17] !== handleOnChange || $[18] !== required || $[19] !== rest || $[20] !== t2 || $[21] !== t3 || $[22] !== t4 || $[23] !== value) {
    t5 = {
      type: "checkbox",
      disabled,
      ref: checkboxRef,
      checked: t2,
      defaultChecked,
      required,
      "aria-required": t3,
      "aria-invalid": t4,
      onChange: handleOnChange,
      value,
      name: value,
      ...rest
    };
    $[14] = checkboxRef;
    $[15] = defaultChecked;
    $[16] = disabled;
    $[17] = handleOnChange;
    $[18] = required;
    $[19] = rest;
    $[20] = t2;
    $[21] = t3;
    $[22] = t4;
    $[23] = value;
    $[24] = t5;
  } else {
    t5 = $[24];
  }
  const inputProps = t5;
  let t6;
  if ($[25] !== checkboxRef || $[26] !== indeterminate) {
    t6 = () => {
      if (checkboxRef.current) {
        checkboxRef.current.indeterminate = indeterminate || false;
      }
    };
    $[25] = checkboxRef;
    $[26] = indeterminate;
    $[27] = t6;
  } else {
    t6 = $[27];
  }
  let t7;
  if ($[28] !== checkboxRef || $[29] !== checked || $[30] !== indeterminate) {
    t7 = [indeterminate, checked, checkboxRef];
    $[28] = checkboxRef;
    $[29] = checked;
    $[30] = indeterminate;
    $[31] = t7;
  } else {
    t7 = $[31];
  }
  useIsomorphicLayoutEffect(t6, t7);
  let t8;
  if ($[32] !== checkboxRef || $[33] !== indeterminate) {
    t8 = () => {
      const {
        current: checkbox
      } = checkboxRef;
      if (!checkbox) {
        return;
      }
      if (indeterminate) {
        checkbox.setAttribute("aria-checked", "mixed");
      } else {
        checkbox.setAttribute("aria-checked", checkbox.checked ? "true" : "false");
      }
    };
    $[32] = checkboxRef;
    $[33] = indeterminate;
    $[34] = t8;
  } else {
    t8 = $[34];
  }
  useEffect(t8);
  let t9;
  if ($[35] !== className) {
    t9 = clsx(className, sharedClasses.Input, classes.Checkbox);
    $[35] = className;
    $[36] = t9;
  } else {
    t9 = $[36];
  }
  let t10;
  if ($[37] !== inputProps || $[38] !== t9) {
    t10 = /*#__PURE__*/jsx("input", {
      ...inputProps,
      className: t9
    });
    $[37] = inputProps;
    $[38] = t9;
    $[39] = t10;
  } else {
    t10 = $[39];
  }
  return t10;
});
Checkbox.displayName = 'Checkbox';
Checkbox.__SLOT__ = Symbol('Checkbox');

export { Checkbox as default };