import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, css, createRef, elementContains } from '../../Utilities';
import { FocusZone, FocusZoneDirection } from '../../FocusZone';
import { Callout } from '../../Callout';
import { Selection, SelectionZone, SelectionMode } from '../../utilities/selection/index';
import { Suggestions } from './Suggestions/Suggestions';
import { SuggestionsController } from './Suggestions/SuggestionsController';
import { ValidationState } from './BasePicker.types';
import { Autofill } from '../Autofill/index';
import * as stylesImport from './BasePicker.scss';
var styles = stylesImport;
var BasePicker = /** @class */ (function (_super) {
    tslib_1.__extends(BasePicker, _super);
    function BasePicker(basePickerProps) {
        var _this = _super.call(this, basePickerProps) || this;
        _this.root = createRef();
        _this.input = createRef();
        _this.focusZone = createRef();
        _this.suggestionElement = createRef();
        _this.SuggestionOfProperType = Suggestions;
        _this.dismissSuggestions = function (ev) {
            var selectItemFunction = function () {
                if (_this.props.onDismiss) {
                    _this.props.onDismiss(ev, _this.suggestionStore.currentSuggestion ? _this.suggestionStore.currentSuggestion.item : undefined);
                }
                if (!ev || (ev && !ev.defaultPrevented)) {
                    // Select the first suggestion if one is available when user leaves.
                    if (_this.canAddItems() && _this.suggestionStore.hasSelectedSuggestion() && _this.state.suggestedDisplayValue) {
                        _this.addItemByIndex(0);
                    }
                }
            };
            if (_this.currentPromise) {
                _this.currentPromise.then(function () { return selectItemFunction(); });
            }
            else {
                selectItemFunction();
            }
            _this.setState({ suggestionsVisible: false });
        };
        _this.refocusSuggestions = function (keyCode) {
            _this.resetFocus();
            if (_this.suggestionStore.suggestions && _this.suggestionStore.suggestions.length > 0) {
                if (keyCode === 38 /* up */) {
                    _this.suggestionStore.setSelectedSuggestion(_this.suggestionStore.suggestions.length - 1);
                }
                else if (keyCode === 40 /* down */) {
                    _this.suggestionStore.setSelectedSuggestion(0);
                }
            }
        };
        _this.onInputChange = function (value) {
            _this.updateValue(value);
            _this.setState({
                moreSuggestionsAvailable: true,
                isMostRecentlyUsedVisible: false
            });
        };
        _this.onSuggestionClick = function (ev, item, index) {
            _this.addItemByIndex(index);
            _this.setState({ suggestionsVisible: false });
        };
        _this.onSuggestionRemove = function (ev, item, index) {
            if (_this.props.onRemoveSuggestion) {
                _this.props.onRemoveSuggestion(item);
            }
            _this.suggestionStore.removeSuggestion(index);
        };
        _this.onInputFocus = function (ev) {
            // Only trigger all of the focus if this component isn't already focused.
            // For example when an item is selected or removed from the selected list it should be treated
            // as though the input is still focused.
            if (!_this.state.isFocused) {
                _this.setState({ isFocused: true });
                _this.selection.setAllSelected(false);
                if (_this.input.value && _this.input.value.value === '' && _this.props.onEmptyInputFocus) {
                    _this.onEmptyInputFocus();
                    _this.setState({
                        isMostRecentlyUsedVisible: true,
                        moreSuggestionsAvailable: false,
                        suggestionsVisible: true
                    });
                }
                else if (_this.input.value && _this.input.value.value) {
                    _this.setState({
                        isMostRecentlyUsedVisible: false,
                        suggestionsVisible: true
                    });
                }
                if (_this.props.inputProps && _this.props.inputProps.onFocus) {
                    _this.props.inputProps.onFocus(ev);
                }
            }
        };
        _this.onInputBlur = function (ev) {
            // Only blur if an unrelated element gets focus. Otherwise treat it as though it still has focus.
            if (!elementContains(_this.root.value, ev.relatedTarget)) {
                _this.setState({ isFocused: false });
                if (_this.props.inputProps && _this.props.inputProps.onBlur) {
                    _this.props.inputProps.onBlur(ev);
                }
            }
        };
        _this.onKeyDown = function (ev) {
            var keyCode = ev.which;
            switch (keyCode) {
                case 27 /* escape */:
                    if (_this.state.suggestionsVisible) {
                        _this.setState({ suggestionsVisible: false });
                        ev.preventDefault();
                        ev.stopPropagation();
                    }
                    break;
                case 9 /* tab */:
                case 13 /* enter */:
                    if (_this.suggestionElement.value && _this.suggestionElement.value.hasSuggestedActionSelected()) {
                        _this.suggestionElement.value.executeSelectedAction();
                    }
                    else if (!ev.shiftKey && _this.suggestionStore.hasSelectedSuggestion() && _this.state.suggestionsVisible) {
                        _this.completeSuggestion();
                        ev.preventDefault();
                        ev.stopPropagation();
                    }
                    else {
                        _this._onValidateInput();
                    }
                    break;
                case 8 /* backspace */:
                    if (!_this.props.disabled) {
                        _this.onBackspace(ev);
                    }
                    ev.stopPropagation();
                    break;
                case 46 /* del */:
                    if (!_this.props.disabled) {
                        if (_this.input.value && ev.target === _this.input.value.inputElement && _this.state.suggestionsVisible && _this.suggestionStore.currentIndex !== -1) {
                            if (_this.props.onRemoveSuggestion) {
                                _this.props.onRemoveSuggestion(_this.suggestionStore.currentSuggestion.item);
                            }
                            _this.suggestionStore.removeSuggestion(_this.suggestionStore.currentIndex);
                            _this.forceUpdate();
                        }
                        else {
                            _this.onBackspace(ev);
                        }
                    }
                    ev.stopPropagation();
                    break;
                case 38 /* up */:
                    if (_this.input.value && ev.target === _this.input.value.inputElement && _this.state.suggestionsVisible) {
                        if (_this.suggestionElement.value && _this.suggestionElement.value.tryHandleKeyDown(keyCode, _this.suggestionStore.currentIndex)) {
                            ev.preventDefault();
                            ev.stopPropagation();
                        }
                        else {
                            if (_this.suggestionElement.value && _this.suggestionElement.value.hasSuggestedAction() && _this.suggestionStore.currentIndex === 0) {
                                ev.preventDefault();
                                ev.stopPropagation();
                                _this.suggestionElement.value.focusAboveSuggestions();
                                _this.suggestionStore.deselectAllSuggestions();
                                _this.forceUpdate();
                            }
                            else {
                                if (_this.suggestionStore.previousSuggestion()) {
                                    ev.preventDefault();
                                    ev.stopPropagation();
                                    _this.onSuggestionSelect();
                                }
                            }
                        }
                    }
                    break;
                case 40 /* down */:
                    if (_this.input.value && ev.target === _this.input.value.inputElement && _this.state.suggestionsVisible) {
                        if (_this.suggestionElement.value && _this.suggestionElement.value.tryHandleKeyDown(keyCode, _this.suggestionStore.currentIndex)) {
                            ev.preventDefault();
                            ev.stopPropagation();
                        }
                        else {
                            if (_this.suggestionElement.value && _this.suggestionElement.value.hasSuggestedAction() && (_this.suggestionStore.currentIndex + 1) === _this.suggestionStore.suggestions.length) {
                                ev.preventDefault();
                                ev.stopPropagation();
                                _this.suggestionElement.value.focusBelowSuggestions();
                                _this.suggestionStore.deselectAllSuggestions();
                                _this.forceUpdate();
                            }
                            else {
                                if (_this.suggestionStore.nextSuggestion()) {
                                    ev.preventDefault();
                                    ev.stopPropagation();
                                    _this.onSuggestionSelect();
                                }
                            }
                        }
                    }
                    break;
            }
        };
        _this.onItemChange = function (changedItem, index) {
            var items = _this.state.items;
            if (index >= 0) {
                var newItems = items;
                newItems[index] = changedItem;
                _this._updateSelectedItems(newItems);
            }
        };
        _this.onGetMoreResults = function () {
            _this.setState({
                isSearching: true
            }, function () {
                if (_this.props.onGetMoreResults && _this.input.value) {
                    var suggestions = _this.props.onGetMoreResults(_this.input.value.value, _this.state.items);
                    var suggestionsArray = suggestions;
                    var suggestionsPromiseLike = suggestions;
                    if (Array.isArray(suggestionsArray)) {
                        _this.updateSuggestions(suggestionsArray);
                        _this.setState({ isSearching: false });
                    }
                    else if (suggestionsPromiseLike.then) {
                        suggestionsPromiseLike.then(function (newSuggestions) {
                            _this.updateSuggestions(newSuggestions);
                            _this.setState({ isSearching: false });
                        });
                    }
                }
                else {
                    _this.setState({ isSearching: false });
                }
                if (_this.input.value) {
                    _this.input.value.focus();
                }
                _this.setState({
                    moreSuggestionsAvailable: false,
                    isResultsFooterVisible: true
                });
            });
        };
        _this.addItemByIndex = function (index) {
            _this.addItem(_this.suggestionStore.getSuggestionAtIndex(index).item);
            if (_this.input.value) {
                _this.input.value.clear();
            }
            _this.updateValue('');
        };
        _this.addItem = function (item) {
            var processedItem = _this.props.onItemSelected ? _this.props.onItemSelected(item) : item;
            if (processedItem === null) {
                return;
            }
            var processedItemObject = processedItem;
            var processedItemPromiseLike = processedItem;
            if (processedItemPromiseLike && processedItemPromiseLike.then) {
                processedItemPromiseLike.then(function (resolvedProcessedItem) {
                    var newItems = _this.state.items.concat([resolvedProcessedItem]);
                    _this._updateSelectedItems(newItems);
                });
            }
            else {
                var newItems = _this.state.items.concat([processedItemObject]);
                _this._updateSelectedItems(newItems);
            }
            _this.setState({ suggestedDisplayValue: '' });
        };
        _this.removeItem = function (item) {
            var items = _this.state.items;
            var index = items.indexOf(item);
            if (index >= 0) {
                var newItems = items.slice(0, index).concat(items.slice(index + 1));
                _this._updateSelectedItems(newItems);
            }
        };
        _this.removeItems = function (itemsToRemove) {
            var items = _this.state.items;
            var newItems = items.filter(function (item) { return itemsToRemove.indexOf(item) === -1; });
            var firstItemToRemove = itemsToRemove[0];
            var index = items.indexOf(firstItemToRemove);
            _this._updateSelectedItems(newItems, index);
        };
        _this._isFocusZoneInnerKeystroke = function (ev) {
            // If suggestions are shown const up/down keys control them, otherwise allow them through to control the focusZone.
            if (_this.state.suggestionsVisible) {
                switch (ev.which) {
                    case 38 /* up */:
                    case 40 /* down */:
                        return true;
                }
            }
            if (ev.which === 13 /* enter */) {
                return true;
            }
            return false;
        };
        var items = basePickerProps.selectedItems || basePickerProps.defaultSelectedItems || [];
        _this.suggestionStore = new SuggestionsController();
        _this.selection = new Selection({ onSelectionChanged: function () { return _this.onSelectionChange(); } });
        _this.selection.setItems(items);
        _this.state = {
            items: items,
            suggestedDisplayValue: '',
            isMostRecentlyUsedVisible: false,
            moreSuggestionsAvailable: false,
            isFocused: false,
            isSearching: false
        };
        return _this;
    }
    Object.defineProperty(BasePicker.prototype, "items", {
        get: function () {
            return this.state.items;
        },
        enumerable: true,
        configurable: true
    });
    BasePicker.prototype.componentWillUpdate = function (newProps, newState) {
        if (newState.items && newState.items !== this.state.items) {
            this.selection.setItems(newState.items);
        }
    };
    BasePicker.prototype.componentDidMount = function () {
        this.selection.setItems(this.state.items);
        this._onResolveSuggestions = this._async.debounce(this._onResolveSuggestions, this.props.resolveDelay);
    };
    BasePicker.prototype.componentWillReceiveProps = function (newProps) {
        var _this = this;
        var newItems = newProps.selectedItems;
        if (newItems) {
            var focusIndex_1;
            // If there are less new items than old items then something was removed and we
            // should try to keep focus consistent
            if (newItems.length < this.state.items.length) {
                focusIndex_1 = this.state.items.indexOf(this.selection.getSelection()[0]);
            }
            this.setState({
                items: newProps.selectedItems
            }, function () {
                if (focusIndex_1 >= 0) {
                    _this.resetFocus(focusIndex_1);
                }
            });
        }
    };
    BasePicker.prototype.componentWillUnmount = function () {
        _super.prototype.componentWillUnmount.call(this);
        if (this.loadingTimer) {
            this._async.clearTimeout(this.loadingTimer);
        }
        if (this.currentPromise) {
            this.currentPromise = undefined;
        }
    };
    BasePicker.prototype.focus = function () {
        if (this.focusZone.value) {
            this.focusZone.value.focus();
        }
    };
    BasePicker.prototype.focusInput = function () {
        if (this.input.value) {
            this.input.value.focus();
        }
    };
    BasePicker.prototype.completeSuggestion = function () {
        if (this.suggestionStore.hasSelectedSuggestion() && this.input.value) {
            this.addItem(this.suggestionStore.currentSuggestion.item);
            this.updateValue('');
            this.input.value.clear();
        }
    };
    BasePicker.prototype.render = function () {
        var suggestedDisplayValue = this.state.suggestedDisplayValue;
        var _a = this.props, className = _a.className, inputProps = _a.inputProps, disabled = _a.disabled;
        var currentIndex = this.suggestionStore.currentIndex;
        var selectedSuggestion = currentIndex > -1 ? this.suggestionStore.getSuggestionAtIndex(this.suggestionStore.currentIndex) : undefined;
        var selectedSuggestionAlert = selectedSuggestion ? selectedSuggestion.ariaLabel : undefined;
        var activeDescendant = currentIndex > -1 ? 'sug-' + currentIndex : undefined;
        return (React.createElement("div", { ref: this.root, className: css('ms-BasePicker', className ? className : ''), onKeyDown: this.onKeyDown },
            React.createElement(FocusZone, { componentRef: this.focusZone, direction: FocusZoneDirection.bidirectional, isInnerZoneKeystroke: this._isFocusZoneInnerKeystroke },
                React.createElement("div", { className: styles.screenReaderOnly, role: 'alert', id: 'selected-suggestion-alert', "aria-live": 'assertive' },
                    selectedSuggestionAlert,
                    " "),
                React.createElement(SelectionZone, { selection: this.selection, selectionMode: SelectionMode.multiple },
                    React.createElement("div", { className: css('ms-BasePicker-text', styles.pickerText, this.state.isFocused && styles.inputFocused), role: 'list' },
                        this.renderItems(),
                        this.canAddItems() && (React.createElement(Autofill, tslib_1.__assign({}, inputProps, { className: css('ms-BasePicker-input', styles.pickerInput), ref: this.input, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onInputValueChange: this.onInputChange, suggestedDisplayValue: suggestedDisplayValue, "aria-activedescendant": activeDescendant, "aria-owns": 'suggestion-list', "aria-expanded": !!this.state.suggestionsVisible, "aria-haspopup": 'true', autoCapitalize: 'off', autoComplete: 'off', role: 'combobox', disabled: disabled, "aria-controls": 'selected-suggestion-alert', onInputChange: this.props.onInputChange })))))),
            this.renderSuggestions()));
    };
    BasePicker.prototype.canAddItems = function () {
        var items = this.state.items;
        var itemLimit = this.props.itemLimit;
        return itemLimit === undefined || items.length < itemLimit;
    };
    BasePicker.prototype.renderSuggestions = function () {
        var TypedSuggestion = this.SuggestionOfProperType;
        return this.state.suggestionsVisible && this.input ? (React.createElement(Callout, { isBeakVisible: false, gapSpace: 5, target: this.input.value ? this.input.value.inputElement : undefined, onDismiss: this.dismissSuggestions, directionalHint: 4 /* bottomLeftEdge */, directionalHintForRTL: 6 /* bottomRightEdge */ },
            React.createElement(TypedSuggestion, tslib_1.__assign({ onRenderSuggestion: this.props.onRenderSuggestionsItem, onSuggestionClick: this.onSuggestionClick, onSuggestionRemove: this.onSuggestionRemove, suggestions: this.suggestionStore.getSuggestions(), ref: this.suggestionElement, onGetMoreResults: this.onGetMoreResults, moreSuggestionsAvailable: this.state.moreSuggestionsAvailable, isLoading: this.state.suggestionsLoading, isSearching: this.state.isSearching, isMostRecentlyUsedVisible: this.state.isMostRecentlyUsedVisible, isResultsFooterVisible: this.state.isResultsFooterVisible, refocusSuggestions: this.refocusSuggestions }, this.props.pickerSuggestionsProps)))) : (null);
    };
    BasePicker.prototype.renderItems = function () {
        var _this = this;
        var _a = this.props, disabled = _a.disabled, removeButtonAriaLabel = _a.removeButtonAriaLabel;
        var onRenderItem = this.props.onRenderItem;
        var items = this.state.items;
        return items.map(function (item, index) { return onRenderItem({
            item: item,
            index: index,
            key: item.key ? item.key : index,
            selected: _this.selection.isIndexSelected(index),
            onRemoveItem: function () { return _this.removeItem(item); },
            disabled: disabled,
            onItemChange: _this.onItemChange,
            removeButtonAriaLabel: removeButtonAriaLabel
        }); });
    };
    BasePicker.prototype.resetFocus = function (index) {
        var items = this.state.items;
        if (items.length && index >= 0) {
            var newEl = this.root.value && this.root.value.querySelectorAll('[data-selection-index]')[Math.min(index, items.length - 1)];
            if (newEl && this.focusZone.value) {
                this.focusZone.value.focusElement(newEl);
            }
        }
        else if (!this.canAddItems()) {
            items[items.length - 1].selected = true;
            this.resetFocus(items.length - 1);
        }
        else {
            if (this.input.value) {
                this.input.value.focus();
            }
        }
    };
    BasePicker.prototype.onSuggestionSelect = function () {
        if (this.suggestionStore.currentSuggestion) {
            var currentValue = this.input.value ? this.input.value.value : '';
            var itemValue = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, currentValue);
            this.setState({ suggestedDisplayValue: itemValue });
        }
    };
    BasePicker.prototype.onSelectionChange = function () {
        this.forceUpdate();
    };
    BasePicker.prototype.updateSuggestions = function (suggestions) {
        this.suggestionStore.updateSuggestions(suggestions, 0);
        this.forceUpdate();
    };
    BasePicker.prototype.onEmptyInputFocus = function () {
        var onEmptyInputFocus = this.props.onEmptyInputFocus;
        var suggestions = onEmptyInputFocus(this.state.items);
        this.updateSuggestionsList(suggestions);
    };
    BasePicker.prototype.updateValue = function (updatedValue) {
        this._onResolveSuggestions(updatedValue);
    };
    BasePicker.prototype.updateSuggestionsList = function (suggestions, updatedValue) {
        var _this = this;
        var suggestionsArray = suggestions;
        var suggestionsPromiseLike = suggestions;
        // Check to see if the returned value is an array, if it is then just pass it into the next function.
        // If the returned value is not an array then check to see if it's a promise or PromiseLike. If it is then resolve it asynchronously.
        if (Array.isArray(suggestionsArray)) {
            if (updatedValue !== undefined) {
                this.resolveNewValue(updatedValue, suggestionsArray);
            }
            else {
                this.suggestionStore.updateSuggestions(suggestionsArray, 0);
            }
        }
        else if (suggestionsPromiseLike && suggestionsPromiseLike.then) {
            if (!this.loadingTimer) {
                this.loadingTimer = this._async.setTimeout(function () {
                    _this.setState({
                        suggestionsLoading: true
                    });
                }, 500);
            }
            // Clear suggestions
            this.suggestionStore.updateSuggestions([]);
            if (updatedValue !== undefined) {
                this.setState({
                    suggestionsVisible: this.input.value ? (this.input.value.value !== '' && this.input.value.inputElement === document.activeElement) : false
                });
            }
            else {
                this.setState({
                    suggestionsVisible: this.input.value ? this.input.value.inputElement === document.activeElement : false
                });
            }
            // Ensure that the promise will only use the callback if it was the most recent one.
            var promise_1 = this.currentPromise = suggestionsPromiseLike;
            promise_1.then(function (newSuggestions) {
                if (promise_1 === _this.currentPromise) {
                    if (updatedValue !== undefined) {
                        _this.resolveNewValue(updatedValue, newSuggestions);
                    }
                    else {
                        _this.suggestionStore.updateSuggestions(newSuggestions);
                        _this.setState({
                            suggestionsLoading: false
                        });
                    }
                    if (_this.loadingTimer) {
                        _this._async.clearTimeout(_this.loadingTimer);
                        _this.loadingTimer = undefined;
                    }
                }
            });
        }
    };
    BasePicker.prototype.resolveNewValue = function (updatedValue, suggestions) {
        this.suggestionStore.updateSuggestions(suggestions, 0);
        var itemValue = undefined;
        if (this.suggestionStore.currentSuggestion) {
            itemValue = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, updatedValue);
        }
        this.setState({
            suggestionsLoading: false,
            suggestedDisplayValue: itemValue,
            suggestionsVisible: this.input.value ? (this.input.value.value !== '' && this.input.value.inputElement === document.activeElement) : false
        });
    };
    BasePicker.prototype.onChange = function (items) {
        if (this.props.onChange) {
            this.props.onChange(items);
        }
    };
    // This is protected because we may expect the backspace key to work differently in a different kind of picker.
    // This lets the subclass override it and provide it's own onBackspace. For an example see the BasePickerListBelow
    BasePicker.prototype.onBackspace = function (ev) {
        if (this.state.items.length && !this.input.value || this.input.value && (!this.input.value.isValueSelected && this.input.value.cursorLocation === 0)) {
            if (this.selection.getSelectedCount() > 0) {
                this.removeItems(this.selection.getSelection());
            }
            else {
                this.removeItem(this.state.items[this.state.items.length - 1]);
            }
        }
    };
    /**
     * Controls what happens whenever there is an action that impacts the selected items.
     * If selectedItems is provided as a property then this will act as a controlled component and it will not update it's own state.
     */
    BasePicker.prototype._updateSelectedItems = function (items, focusIndex) {
        var _this = this;
        if (this.props.selectedItems) {
            // If the component is a controlled component then the controlling component will need
            this.onChange(items);
        }
        else {
            this.setState({ items: items }, function () {
                _this._onSelectedItemsUpdated(items, focusIndex);
            });
        }
    };
    BasePicker.prototype._onSelectedItemsUpdated = function (items, focusIndex) {
        this.resetFocus(focusIndex);
        this.onChange(items);
    };
    BasePicker.prototype._onResolveSuggestions = function (updatedValue) {
        var suggestions = this.props.onResolveSuggestions(updatedValue, this.state.items);
        if (suggestions !== null) {
            this.updateSuggestionsList(suggestions, updatedValue);
        }
    };
    BasePicker.prototype._onValidateInput = function () {
        if (this.props.onValidateInput && this.input.value && this.props.onValidateInput(this.input.value.value) !== ValidationState.invalid && this.props.createGenericItem) {
            var itemToConvert = this.props.createGenericItem(this.input.value.value, this.props.onValidateInput(this.input.value.value));
            this.suggestionStore.createGenericSuggestion(itemToConvert);
            this.completeSuggestion();
        }
    };
    BasePicker.prototype._getTextFromItem = function (item, currentValue) {
        if (this.props.getTextFromItem) {
            return this.props.getTextFromItem(item, currentValue);
        }
        else {
            return '';
        }
    };
    return BasePicker;
}(BaseComponent));
export { BasePicker };
var BasePickerListBelow = /** @class */ (function (_super) {
    tslib_1.__extends(BasePickerListBelow, _super);
    function BasePickerListBelow() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    BasePickerListBelow.prototype.render = function () {
        var suggestedDisplayValue = this.state.suggestedDisplayValue;
        var _a = this.props, className = _a.className, inputProps = _a.inputProps, disabled = _a.disabled;
        return (React.createElement("div", null,
            React.createElement("div", { ref: this.root, className: css('ms-BasePicker', className ? className : ''), onKeyDown: this.onKeyDown },
                React.createElement(SelectionZone, { selection: this.selection, selectionMode: SelectionMode.multiple },
                    React.createElement("div", { className: css('ms-BasePicker-text', styles.pickerText, this.state.isFocused && styles.inputFocused) },
                        React.createElement(Autofill, tslib_1.__assign({}, inputProps, { className: css('ms-BasePicker-input', styles.pickerInput), ref: this.input, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onInputValueChange: this.onInputChange, suggestedDisplayValue: suggestedDisplayValue, "aria-activedescendant": 'sug-' + this.suggestionStore.currentIndex, "aria-owns": 'suggestion-list', "aria-expanded": !!this.state.suggestionsVisible, "aria-haspopup": 'true', autoCapitalize: 'off', autoComplete: 'off', role: 'combobox', disabled: disabled }))))),
            this.renderSuggestions(),
            React.createElement(FocusZone, { componentRef: this.focusZone, className: 'ms-BasePicker-selectedItems', isCircularNavigation: true, direction: FocusZoneDirection.bidirectional, isInnerZoneKeystroke: this._isFocusZoneInnerKeystroke }, this.renderItems())));
    };
    BasePickerListBelow.prototype.onBackspace = function (ev) {
        // override the existing backspace method to not do anything because the list items appear below.
    };
    return BasePickerListBelow;
}(BasePicker));
export { BasePickerListBelow };
//# sourceMappingURL=BasePicker.js.map