import React, { useCallback } from 'react';
import { CellUrlInput } from '@wix/patterns-fields';
import { classes } from './Edit.st.css.js';
export const UrlEdit = ({ value, onChange, onCommit, onCancel, inputRef, editTrigger, }) => {
    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("div", { style: {
            width: '100%',
            height: '100%',
            display: 'flex',
            alignItems: 'center',
        } },
        React.createElement(CellUrlInput, { inputRef: inputRef, value: value ?? '', onChange: onChange, onKeyDown: handleKeyDown, onBlur: handleBlur, autoSelect: !(typeof editTrigger === 'object' && editTrigger?.kind === 'type'), className: classes.urlInput })));
};
//# sourceMappingURL=Edit.js.map