import { Search } from '@wix/design-system';
import React, { useEffect, useRef } from 'react';
import { observer } from 'mobx-react-lite';
import { useWixPatternsContainer } from '@wix/bex-core/react';
export function _CustomColumnsSearch({ state, }) {
    const { translate: t } = useWixPatternsContainer();
    const searchInputRef = useRef(null);
    useEffect(() => {
        state.columnsCollection.searchInputRef = {
            focus: () => {
                searchInputRef.current?.focus();
            },
        };
        return () => {
            state.columnsCollection.searchInputRef = null;
        };
    }, [state.columnsCollection]);
    return (React.createElement(Search, { ref: searchInputRef, dataHook: "custom-columns-search", size: "small", value: state.searchValue, onChange: (e) => {
            state.setSearchValue(e.target.value);
        }, onClear: () => {
            state.setSearchValue('');
        }, placeholder: t('cairo.table.custom-columns.dragAndDrop.search-placeholder') }));
}
export const CustomColumnsSearch = observer(_CustomColumnsSearch);
//# sourceMappingURL=CustomColumnsSearch.js.map