@hypothesis/frontend-shared/lib/components/Checkbox.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/Checkbox.js";
// @ts-ignore
import checkboxSVG from '../../images/icons/checkbox.svg';
import classnames from 'classnames';
import { registerIcon, SvgIcon } from './SvgIcon'; // Register the checkbox icon for use

import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
import { Fragment as _Fragment } from "preact/jsx-dev-runtime";
const checkboxIcon = registerIcon('checkbox', checkboxSVG);
/**
 * @typedef CheckboxBaseProps
 * @prop {string} [classes] - Additional CSS classes to apply to the <input>
 * @prop {string} name - The `name` of the checkbox.
 * @prop {import('preact').Ref<HTMLInputElement>} [inputRef] - Access to the input
 *    element in case a parent element wants for example to focus on it.
 * @prop {(checked: boolean) => void} [onToggle] - Callback when checkbox is
 *   checked/unchecked
 * @prop {never} [type] - Type is always 'checkbox'
 * @prop {never} [children] - Children are not allowed
 *
 * The props for Checkbox component extends and narrows the attributes of the native input element.
 * `onToggle` event should only be associated to HTMLDetailsElement, but Preact is not very strict with types.
 * We omit the `onToggle` because it clashes with our definition.
 * @typedef {Omit<import('preact').JSX.HTMLAttributes<HTMLInputElement>, 'onToggle'> & CheckboxBaseProps} CheckboxProps
 */

/**
 * @typedef LabeledCheckboxBaseProps
 * @prop {import('preact').ComponentChildren} children - Label text or elements
 * @prop {string} [containerClasses] - Optional additional classes for the container
 *   <label> element
 *
 * @typedef {Omit<CheckboxProps, 'children'> & LabeledCheckboxBaseProps} LabeledCheckboxProps
 */

/**
 * A checkbox input.
 *
 * A checkbox component is a combination of an <input> element and a sibling
 * <svg> element that is used for the visual appearance of the checkbox.
 *
 * @param {CheckboxProps} props
 */

export function Checkbox({
  classes = '',
  inputRef,
  onToggle,
  onClick,
  ...restProps
}) {
  /**
   * @param {import('preact').JSX.TargetedMouseEvent<HTMLInputElement>} event
   * @this HTMLInputElement
   */
  function onPressed(event) {
    onToggle === null || onToggle === void 0 ? void 0 : onToggle(event.currentTarget.checked); // preact event handlers expects `this` context to be of type `never`
    // https://github.com/preactjs/preact/issues/3137

    onClick === null || onClick === void 0 ? void 0 : onClick.call(
    /** @type {never} */
    this, event);
  }

  return _jsxDEV(_Fragment, {
    children: [_jsxDEV("input", {
      className: classnames('Hyp-Checkbox', classes),
      ref: inputRef,
      type: "checkbox",
      onClick: onPressed,
      ...restProps
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 64,
      columnNumber: 7
    }, this), _jsxDEV(SvgIcon, {
      className: "hyp-svg-checkbox",
      name: checkboxIcon
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 71,
      columnNumber: 7
    }, this)]
  }, void 0, true);
}
/**
 * A labeled checkbox input
 *
 * @param {LabeledCheckboxProps} props
 */

export function LabeledCheckbox({
  children,
  id,
  containerClasses = '',
  ...restProps
}) {
  var _id;

  (_id = id) !== null && _id !== void 0 ? _id : id = restProps.name;
  return _jsxDEV("label", {
    htmlFor: id,
    className: classnames('Hyp-LabeledCheckbox', containerClasses),
    children: [_jsxDEV(Checkbox, {
      id: id,
      ...restProps
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 93,
      columnNumber: 7
    }, this), _jsxDEV("span", {
      "data-testid": "label-text",
      children: children
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 94,
      columnNumber: 7
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 89,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=Checkbox.js.map