import React, { useCallback } from 'react';
import { CellCheckbox } from '@wix/patterns-fields';
import { classes } from './Edit.st.css.js';
export const BooleanEdit = ({ value, onChange, onCommit, onCancel, }) => {
    const handleChange = useCallback((checked) => {
        onChange(checked);
        onCommit();
    }, [onChange, onCommit]);
    const stopClickPropagation = useCallback((e) => e.stopPropagation(), []);
    const handleKeyDown = useCallback((e) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            onChange(!value);
            onCommit();
        }
        else if (e.key === 'Escape') {
            e.preventDefault();
            onCancel();
        }
    }, [value, onChange, onCommit, onCancel]);
    return (React.createElement("div", { onKeyDown: handleKeyDown, onClick: stopClickPropagation, className: classes.booleanEdit },
        React.createElement(CellCheckbox, { dataHook: "boolean-checkbox", checked: !!value, onChange: handleChange, size: "small" })));
};
//# sourceMappingURL=Edit.js.map