@hypothesis/frontend-shared/lib/components/Checkbox.d.ts

Shared components, styles and utilities for Hypothesis projects

/**
 * @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 }: CheckboxProps): import("preact").JSX.Element;
/**
 * A labeled checkbox input
 *
 * @param {LabeledCheckboxProps} props
 */
export function LabeledCheckbox({ children, id, containerClasses, ...restProps }: LabeledCheckboxProps): import("preact").JSX.Element;
export type CheckboxBaseProps = {
    /**
     * - Additional CSS classes to apply to the <input>
     */
    classes?: string | undefined;
    /**
     * - The `name` of the checkbox.
     */
    name: string;
    /**
     * - Access to the input
     * element in case a parent element wants for example to focus on it.
     */
    inputRef?: import("preact").Ref<HTMLInputElement> | undefined;
    /**
     * - Callback when checkbox is
     * checked/unchecked
     */
    onToggle?: ((checked: boolean) => void) | undefined;
    /**
     * - Type is always 'checkbox'
     */
    type?: undefined;
    /**
     * - 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.
     */
    children?: undefined;
};
export type CheckboxProps = Omit<import('preact').JSX.HTMLAttributes<HTMLInputElement>, 'onToggle'> & CheckboxBaseProps;
export type LabeledCheckboxBaseProps = {
    /**
     * - Label text or elements
     */
    children: import('preact').ComponentChildren;
    /**
     * - Optional additional classes for the container
     * <label> element
     */
    containerClasses?: string | undefined;
};
export type LabeledCheckboxProps = Omit<CheckboxProps, 'children'> & LabeledCheckboxBaseProps;