<commit_before>import PropTypes from 'prop-types';
import React, { useRef } from 'react';
import uuid from 'uuid';
import classNames from 'classnames';
import Autowhatever from 'react-autowhatever';
import { useTranslation } from 'react-i18next';

import theme from './Typeahead.scss';
import {
	renderItemsContainerFactory,
	renderInputComponent,
	renderSectionTitle,
	renderItem,
} from './Typeahead.component.renderers';
import { Action } from '../Actions';
import I18N_DOMAIN_COMPONENTS from '../constants';

/**
 * Show suggestions for search bar
 * @example
 *
 * <Typeahead {...props} />
 */
function Typeahead({ onToggle, icon, position, docked, ...rest }) {
	const { t } = useTranslation(I18N_DOMAIN_COMPONENTS);

	const inputRef = useRef(null);

	if (docked && onToggle) {
		return (
			<Action
				onClick={onToggle}
				label={icon.title}
				hideLabel
				icon={icon.name}
				bsStyle={icon.bsStyle}
				className={classNames(theme['only-icon-cls'], 'tc-typeahead-toggle')}
				role={icon.role}
				tooltipPlacement={icon.tooltipPlacement}
			/>
		);
	}

	const sectionProps = rest.multiSection
		? { getSectionItems: section => section.suggestions, renderSectionTitle }
		: null;

	const themeProps = {
		theme: {
			containerOpen: classNames(theme['container-open'], 'tc-typeahead-container-open'),
			highlight: classNames(theme['highlight-match'], 'tc-typeahead-highlight-match'),
			input: classNames(theme['typeahead-input'], 'tc-typeahead-typeahead-input'),
			itemHighlighted: classNames(theme['item-highlighted'], 'tc-typeahead-item-highlighted'),
			itemsContainer: classNames(theme['items-container'], 'tc-typeahead-items-container'),
			itemsList: theme.items,
			sectionContainer: classNames(theme['section-container'], 'tc-typeahead-section-container'),

			...rest.theme,
			container: classNames(
				theme['tc-typeahead-container'],
				'tc-typeahead-container',
				position === 'right' && theme.right,
				rest.theme && rest.theme.container,
				rest.className,
				{
					[theme.loading]: rest.isLoading,
				},
			),
		},
	};

	const inputProps = {
		renderInputComponent,
		inputProps: {
			autoFocus: rest.autoFocus,
			debounceMinLength: rest.debounceMinLength,
			debounceTimeout: rest.debounceTimeout,
			disabled: rest.disabled,
			id: rest.id,
			inputRef: ref => {
				inputRef.current = ref;
			},
			onBlur: rest.onBlur,
			onChange: rest.onChange && (event => rest.onChange(event, { value: event.target.value })),
			onFocus: rest.onFocus,
			onKeyDown: rest.onKeyDown,<commit_msg>fix(Component/Typeahead): ref issue with ng apps (#2705)<commit_after>import PropTypes from 'prop-types';
import React, { useRef } from 'react';
import uuid from 'uuid';
import classNames from 'classnames';
import Autowhatever from 'react-autowhatever';
import { useTranslation } from 'react-i18next';

import theme from './Typeahead.scss';
import {
	renderItemsContainerFactory,
	renderInputComponent,
	renderSectionTitle,
	renderItem,
} from './Typeahead.component.renderers';
import { Action } from '../Actions';
import I18N_DOMAIN_COMPONENTS from '../constants';

/**
 * Show suggestions for search bar
 * @example
 *
 * <Typeahead {...props} />
 */
function Typeahead({ onToggle, icon, position, docked, ...rest }) {
	const { t } = useTranslation(I18N_DOMAIN_COMPONENTS);

	const inputRef = useRef(null);

	if (docked && onToggle) {
		return (
			<Action
				onClick={onToggle}
				label={icon.title}
				hideLabel
				icon={icon.name}
				bsStyle={icon.bsStyle}
				className={classNames(theme['only-icon-cls'], 'tc-typeahead-toggle')}
				role={icon.role}
				tooltipPlacement={icon.tooltipPlacement}
			/>
		);
	}

	const sectionProps = rest.multiSection
		? { getSectionItems: section => section.suggestions, renderSectionTitle }
		: null;

	const themeProps = {
		theme: {
			containerOpen: classNames(theme['container-open'], 'tc-typeahead-container-open'),
			highlight: classNames(theme['highlight-match'], 'tc-typeahead-highlight-match'),
			input: classNames(theme['typeahead-input'], 'tc-typeahead-typeahead-input'),
			itemHighlighted: classNames(theme['item-highlighted'], 'tc-typeahead-item-highlighted'),
			itemsContainer: classNames(theme['items-container'], 'tc-typeahead-items-container'),
			itemsList: theme.items,
			sectionContainer: classNames(theme['section-container'], 'tc-typeahead-section-container'),

			...rest.theme,
			container: classNames(
				theme['tc-typeahead-container'],
				'tc-typeahead-container',
				position === 'right' && theme.right,
				rest.theme && rest.theme.container,
				rest.className,
				{
					[theme.loading]: rest.isLoading,
				},
			),
		},
	};

	const inputProps = {
		renderInputComponent,
		inputProps: {
			autoFocus: rest.autoFocus,
			debounceMinLength: rest.debounceMinLength,
			debounceTimeout: rest.debounceTimeout,
			disabled: rest.disabled,
			id: rest.id,
			inputRef,
			onBlur: rest.onBlur,
			onChange: rest.onChange && (event => rest.onChange(event, { value: event.target.value })),
			onFocus: rest.onFocus,
			onKeyDown: rest.onKeyDown,
{'fraction_non_alphanumeric': 0.14588281868566905, 'fraction_numerical': 0.003167062549485352, 'mean_word_length': 4.347089947089947, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 12, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3015957', 'n_tokens_mistral': 1860, 'n_tokens_neox': 1579, 'n_words': 308}