import React, { useRef, useEffect, forwardRef } from 'react';
import { Box, Input } from '@wix/design-system';
import { observer } from 'mobx-react-lite';
import { st, classes } from './InputOverflow.st.css.js';
export const InputOverflow = observer(forwardRef((props, ref) => {
    const { state, selected, focused, text, ...inputProps } = props;
    const helperNodeRef = useRef();
    useEffect(() => {
        if (!helperNodeRef.current) {
            return;
        }
        return state.init(helperNodeRef.current);
    }, []);
    return (React.createElement(Box, { position: "relative", direction: "vertical" },
        React.createElement("div", { style: {
                height: 0,
                visibility: 'hidden',
            }, "aria-hidden": true },
            React.createElement(Input, { ...inputProps, ref: ref, textOverflow: undefined, clearButton: false, onClear: undefined, value: text, inputRef: (node) => {
                    helperNodeRef.current = node;
                } })),
        React.createElement(Input, { ...inputProps, ref: ref, onKeyDown: (e) => {
                if (e.nativeEvent.code === 'Space' &&
                    document.querySelectorAll('[data-option-hovered]').length === 0) {
                    e.stopPropagation();
                }
                inputProps.onKeyDown?.(e);
            }, textOverflow: undefined, className: st(classes.root, {
                selected,
                focused,
            }) })));
}));
//# sourceMappingURL=InputOverflow.js.map