import { jsx as _jsx } from "react/jsx-runtime";
import { isActionKey } from "../../../utils/events.js";
import { UiCheckbox } from "../../UiCheckbox/UiCheckbox.js";
import { e } from "../asyncTableBem.js";
import { ASYNC_TABLE_SELECTED_COUNT_ID } from "./constants.js";
import { getColumnHeaderId, stopPropagationCallback } from "./utils.js";
export function UiAsyncTableCheckbox({ onChange, checked, indeterminate, disabled, ariaLabel, isCellFocused, header, cellRef, cellId, }) {
    // The native input is now overlaid on the visible 14×14 control (kit
    // convention for @ui/UiCheckbox), so the input itself is the click
    // target and `stopPropagation` stops the click from bubbling to the
    // cell. Wire `onChange` through `UiCheckbox` so the toggle fires.
    // The cell-div retains keyboard handling (gridcell Space/Enter) and
    // bubbled clicks from any non-input area of the cell.
    return (_jsx("div", { className: e("cell", { checkbox: true, focused: isCellFocused ?? false }), role: header ? undefined : "gridcell", id: cellId, "aria-labelledby": header ? undefined : getColumnHeaderId("checkbox"), "aria-describedby": header ? ASYNC_TABLE_SELECTED_COUNT_ID : undefined, onClick: (e) => {
            stopPropagationCallback(e, onChange);
        }, onKeyDown: (e) => {
            if (isActionKey(e)) {
                stopPropagationCallback(e, onChange);
            }
        }, ref: cellRef, children: _jsx(UiCheckbox, { checked: checked ?? false, stopPropagation: true, onChange: onChange, indeterminate: indeterminate, disabled: disabled, accessibilityConfig: ariaLabel ? { ariaLabel } : undefined, tabIndex: header ? 0 : -1 }) }));
}
