import React, { useCallback } from 'react';
import { Input, Box } from '@wix/design-system';
import { classes } from './Edit.st.css.js';
export const EmailEdit = ({ value, onChange, onCommit, onCancel, inputRef, }) => {
    const handleKeyDown = useCallback((e) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            onCommit();
        }
        else if (e.key === 'Escape') {
            e.preventDefault();
            onCancel();
        }
    }, [onCommit, onCancel]);
    const handleBlur = useCallback(() => {
        onCommit();
    }, [onCommit]);
    return (React.createElement(Box, { width: "100%", height: "100%", verticalAlign: "middle" },
        React.createElement(Input, { ref: (instance) => {
                if (inputRef) {
                    inputRef.current = instance;
                }
            }, size: "small", border: "none", value: value ?? '', onChange: (e) => onChange(e.target.value), onKeyDown: handleKeyDown, onBlur: handleBlur, type: "email", autoSelect: false, className: classes.emailInput })));
};
//# sourceMappingURL=Edit.js.map