import { Box, TableToolbar } from '@wix/design-system';
import React from 'react';
import { classes, st } from './SearchOrCustomFilter.st.css.js';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { observer } from 'mobx-react-lite';
import { useIsMobile } from '../../hooks/useIsMobile';
function _SearchOrCustomFilter(props) {
    const { search } = props;
    const { toolbar: { responsive }, } = useToolbarCollectionContext();
    const { _nextToShrink, search: searchResponsive, responsiveDisabled, } = responsive;
    const isMobile = useIsMobile();
    if (responsiveDisabled || isMobile) {
        return (React.createElement(TableToolbar.Item, { className: st(isMobile ? classes.searchMobile : classes.search) }, search));
    }
    const shouldShrink = _nextToShrink._count >= searchResponsive._count &&
        searchResponsive._shouldShrink;
    return (React.createElement(Box, { direction: "horizontal", maxWidth: "240px", minWidth: shouldShrink ? '139px' : '140px' },
        React.createElement(Box, { width: shouldShrink ? '140px' : '240px' }, search)));
}
export const SearchOrCustomFilter = observer(_SearchOrCustomFilter);
//# sourceMappingURL=SearchOrCustomFilter.js.map