text: define(["require", "exports", "tslib", "react", "../../../Utilities", "../../../Button", "../../../Spinner", "./Suggestions.scss"], function (require, exports, tslib_1, React, Utilities_1, Button_1, Spinner_1, stylesImport) {
      "use strict";
      Object.defineProperty(exports, "__esModule", { value: true });
      var styles = stylesImport;
      var SuggestionsItem = (function (_super) {
          tslib_1.__extends(SuggestionsItem, _super);
          function SuggestionsItem() {
              return _super !== null && _super.apply(this, arguments) || this;
          }
          SuggestionsItem.prototype.render = function () {
              var _a = this.props, suggestionModel = _a.suggestionModel, RenderSuggestion = _a.RenderSuggestion, onClick = _a.onClick, className = _a.className, onRemoveItem = _a.onRemoveItem, showRemoveButton = _a.showRemoveButton, id = _a.id;
              var itemProps = Utilities_1.assign({}, suggestionModel.item, { onRemoveItem: onRemoveItem });
              return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-item', styles.suggestionsItem, (_b = {},
                      _b['is-suggested ' + styles.suggestionsItemIsSuggested] = suggestionModel.selected,
                      _b), className) },
                  React.createElement(Button_1.CommandButton, { onClick: onClick, className: Utilities_1.css('ms-Suggestions-itemButton', styles.itemButton) }, RenderSuggestion(suggestionModel.item, this.props)),
                  this.props.showRemoveButton ? (React.createElement(Button_1.IconButton, { iconProps: { iconName: 'Cancel', style: { fontSize: '12px' } }, title: 'Remove', ariaLabel: 'Remove', onClick: onRemoveItem, className: Utilities_1.css('ms-Suggestions-closeButton', styles.closeButton) })) : (null)));
              var _b;
          };
          return SuggestionsItem;
      }(Utilities_1.BaseComponent));
      exports.SuggestionsItem = SuggestionsItem;
      var Suggestions = (function (_super) {
          tslib_1.__extends(Suggestions, _super);
          function Suggestions(suggestionsProps) {
              var _this = _super.call(this, suggestionsProps) || this;
              _this.SuggestionsItemOfProperType = SuggestionsItem;
              return _this;
          }
          Suggestions.prototype.componentDidUpdate = function () {
              this.scrollSelected();
          };
          Suggestions.prototype.render = function () {
              var _a = this.props, suggestionsHeaderText = _a.suggestionsHeaderText, mostRecentlyUsedHeaderText = _a.mostRecentlyUsedHeaderText, searchForMoreText = _a.searchForMoreText, className = _a.className, moreSuggestionsAvailable = _a.moreSuggestionsAvailable, noResultsFoundText = _a.noResultsFoundText, suggestions = _a.suggestions, isLoading = _a.isLoading, isSearching = _a.isSearching, loadingText = _a.loadingText, onRenderNoResultFound = _a.onRenderNoResultFound, searchingText = _a.searchingText, isMostRecentlyUsedVisible = _a.isMostRecentlyUsedVisible, resultsMaximumNumber = _a.resultsMaximumNumber, resultsFooterFull = _a.resultsFooterFull, resultsFooter = _a.resultsFooter, isResultsFooterVisible = _a.isResultsFooterVisible, showRemoveButtons = _a.showRemoveButtons, suggestionsAvailableAlertText = _a.suggestionsAvailableAlertText;
              var noResults = function () {
                  return noResultsFoundText ?
                      React.createElement("div", { role: 'alert', className: Utilities_1.css('ms-Suggestions-none', styles.suggestionsNone) }, noResultsFoundText) : null;
              };
              var headerText = isMostRecentlyUsedVisible && mostRecentlyUsedHeaderText ? mostRecentlyUsedHeaderText : null;
              var footerTitle = (suggestions.length >= resultsMaximumNumber) ? resultsFooterFull : resultsFooter;
              return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions', className ? className : '', styles.root) },
                  headerText ?
                      (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-title', styles.suggestionsTitle) }, headerText)) : (null),
                  isLoading && (React.createElement(Spinner_1.Spinner, { className: Utilities_1.css('ms-Suggestions-spinner', styles.suggestionsSpinner), label: loadingText })),
                  (!suggestions || !suggestions.length) && !isLoading ?
                      (onRenderNoResultFound ? onRenderNoResultFound(undefined, noResults) : noResults()) :
                      this._renderSuggestions(),
                  searchForMoreText && moreSuggestionsAvailable && (React.createElement(Button_1.CommandButton, { componentRef: this._resolveRef('_searchForMoreButton'), className: Utilities_1.css('ms-SearchMore-button', styles.searchMoreButton), iconProps: { iconName: 'Search' }, onClick: this._getMoreResults, onKeyDown: this._onKeyDown }, searchForMoreText)),
                  isSearching ?
                      (React.createElement(Spinner_1.Spinner, { className: Utilities_1.css('ms-Suggestions-spinner', styles.suggestionsSpinner), label: searchingText })) : (null),
                  !moreSuggestionsAvailable && !isMostRecentlyUsedVisible && !isSearching ?
                      (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-title', styles.suggestionsTitle) }, footerTitle && footerTitle(this.props))) : (null),
                  (!isLoading && !isSearching && suggestions && suggestions.length > 0 && suggestionsAvailableAlertText) ?
                      (React.createElement("span", { role: 'alert', className: Utilities_1.css('ms-Suggestions-suggestionsAvailable', styles.suggestionsAvailable) }, suggestionsAvailableAlertText)) : (null)));
          };
          Suggestions.prototype.focusSearchForMoreButton = function () {
              if (this._searchForMoreButton) {
                  this._searchForMoreButton.focus();
              }
          };
          // TODO get the element to scroll into view properly regardless of direction.
          Suggestions.prototype.scrollSelected = function () {
              if (this._selectedElement) {
                  this._selectedElement.scrollIntoView(false);
              }
          };
          Suggestions.prototype._renderSuggestions = function () {
              var _this = this;
              var _a = this.props, suggestions = _a.suggestions, onRenderSuggestion = _a.onRenderSuggestion, suggestionsItemClassName = _a.suggestionsItemClassName, resultsMaximumNumber = _a.resultsMaximumNumber, showRemoveButtons = _a.showRemoveButtons;
              var TypedSuggestionsItem = this.SuggestionsItemOfProperType;
              if (resultsMaximumNumber) {
                  suggestions = suggestions.slice(0, resultsMaximumNumber);
              }
              return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-container', styles.suggestionsContainer), id: 'suggestion-list', role: 'menu' }, suggestions.map(function (suggestion, index) {
                  return React.createElement("div", { ref: _this._resolveRef(suggestion.selected ? '_selectedElement' : ''), 
                      // tslint:disable-next-line:no-string-literal
                      key: suggestion.item['key'] ? suggestion.item['key'] : index, id: 'sug-' + index, role: 'menuitem' },
                      React.createElement(TypedSuggestionsItem, { id: 'sug-item' + index, suggestionModel: suggestion, RenderSuggestion: onRenderSuggestion, onClick: function (ev) { _this.props.onSuggestionClick(ev, suggestion.item, index); }, className: suggestionsItemClassName, showRemoveButton: showRemoveButtons, onRemoveItem: function (ev) {
                              var onSuggestionRemove = _this.props.onSuggestionRemove;
                              onSuggestionRemove(ev, suggestion.item, index);
                              ev.stopPropagation();
                          } }));
              })));
          };
          Suggestions.prototype._getMoreResults = function () {
              if (this.props.onGetMoreResults) {
                  this.props.onGetMoreResults();
              }
          };
          Suggestions.prototype._onKeyDown = function (ev) {
              if ((ev.keyCode === 38 /* up */ || ev.keyCode === 40 /* down */) && typeof this.props.refocusSuggestions === 'function') {
                  this.props.refocusSuggestions(ev.keyCode);
              }
          };
          tslib_1.__decorate([
              Utilities_1.autobind
          ], Suggestions.prototype, "_getMoreResults", null);
          tslib_1.__decorate([
              Utilities_1.autobind
          ], Suggestions.prototype, "_onKeyDown", null);
          return Suggestions;
      }(Utilities_1.BaseComponent));
      exports.Suggestions = Suggestions;
  });
  //# sourceMappingURL=Suggestions.js.map