import { jsx as _jsx } from "react/jsx-runtime";
import { useLayoutEffect, useRef, useState } from "react";
import { twMerge } from "tailwind-merge";
import { useEventListener, useOnClickOutside } from "usehooks-ts";
export function NodeInput(props) {
    const { onSubmit, onCancel, defaultValue, className, minLength = 1, ...inputProps } = props;
    const [value, setValue] = useState(defaultValue ?? "");
    const ref = useRef(null);
    useOnClickOutside(ref, handleSubmit);
    useEventListener("keyup", (e) => {
        if (e.key === "Enter") {
            handleSubmit();
        }
        if (e.key === "Escape") {
            onCancel();
        }
    });
    useLayoutEffect(() => {
        setTimeout(() => {
            ref.current?.focus();
            ref.current?.select();
            ref.current?.scroll({ left: 9999 });
        }, 100);
    }, []);
    function handleSubmit() {
        if (value.length >= minLength) {
            onSubmit(value);
        }
    }
    return (_jsx("input", { ...inputProps, autoFocus: true, className: twMerge("bg-inherit text-inherit outline-none", className), minLength: minLength, onChange: (e) => setValue(e.target.value), ref: ref, required: true, type: "text", value: value }));
}
//# sourceMappingURL=node-input.js.map