import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2026 GoodData Corporation
import { useId } from "react";
import { UiCheckbox } from "../UiCheckbox/UiCheckbox.js";
import { UiLabelRow } from "../UiLabelRow/UiLabelRow.js";
/**
 * Selectable label row used inside the Labels picker. The row delegates row
 * clicks to the inner checkbox and binds the checkbox's accessible name to
 * the row's label span via `aria-labelledby` — instead of wrapping the row
 * in a `<label>` element (which is invalid HTML around the row's `<div>`).
 * `disabled` locks the row for the primary-key case.
 *
 * @internal
 */
export function UiLabelChecklistRow({ label, kind, suffix, checked, disabled = false, onChange, dataTestId, }) {
    const inputId = useId();
    const labelId = `${inputId}-label`;
    const handleChange = (event) => {
        onChange?.(event.target.checked);
    };
    // Row click delegates to the checkbox toggle. The native input also
    // receives the click directly when the user clicks the checkbox itself —
    // `stopPropagation` on the input stops the row handler from re-toggling.
    const handleRowClick = disabled ? undefined : () => onChange?.(!checked);
    return (_jsx(UiLabelRow, { label: label, kind: kind, suffix: suffix, dataTestId: dataTestId, labelId: labelId, onClick: handleRowClick, leading: _jsx(UiCheckbox, { id: inputId, checked: checked, disabled: disabled, onChange: handleChange, stopPropagation: true, accessibilityConfig: { ariaLabelledBy: labelId } }) }));
}
