@datalayer/primer-rjsf/lib/primer/CheckboxesWidget/CheckboxesWidget.js

React JSON Schema Form (RJSF) for Primer

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Checkbox, CheckboxGroup, FormControl } from "@primer/react";
import { ariaDescribedByIds, enumOptionsDeselectValue, enumOptionsIsSelected, enumOptionsSelectValue, enumOptionsValueForIndex, optionId, } from "@rjsf/utils";
/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
 *  It is typically used to represent an array of enums.
 *
 * @param props - The `WidgetProps` for this component
 */
export default function CheckboxesWidget({ schema, label, id, disabled, options, value, autofocus, readonly, required, onChange, onBlur, onFocus, }) {
    const { enumOptions, enumDisabled, inline, emptyValue } = options;
    const checkboxesValues = Array.isArray(value) ? value : [value];
    const _onChange = (index) => ({ target: { checked } }) => {
        if (checked) {
            onChange(enumOptionsSelectValue(index, checkboxesValues, enumOptions));
        }
        else {
            onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
        }
    };
    const _onBlur = ({ target: { value } }) => onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue));
    const _onFocus = ({ target: { value }, }) => onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue));
    return (_jsxs(CheckboxGroup, { required: required, children: [_jsx(CheckboxGroup.Label, { children: label || schema.title }), Array.isArray(enumOptions) &&
                enumOptions.map((option, index) => {
                    const checked = enumOptionsIsSelected(option.value, checkboxesValues);
                    const itemDisabled = Array.isArray(enumDisabled) &&
                        enumDisabled.indexOf(option.value) !== -1;
                    return (_jsxs(FormControl, { id: optionId(id, index), children: [_jsx(Checkbox, { checked: checked, disabled: disabled || itemDisabled || readonly, autoFocus: autofocus && index === 0, onChange: _onChange(index), onBlur: _onBlur, onFocus: _onFocus, "aria-describedby": ariaDescribedByIds(id) }), _jsx(FormControl.Label, { children: option.label })] }, optionId(id, index)));
                })] }));
}