text: define(["require", "exports", "tslib", "react", "../../Utilities", "../../Button", "../../Icon"], function (require, exports, tslib_1, React, Utilities_1, Button_1, Icon_1) {
      "use strict";
      Object.defineProperty(exports, "__esModule", { value: true });
      var getClassNames = Utilities_1.classNamesFunction();
      var SearchBoxBase = /** @class */ (function (_super) {
          tslib_1.__extends(SearchBoxBase, _super);
          function SearchBoxBase(props) {
              var _this = _super.call(this, props) || this;
              _this._rootElement = React.createRef();
              _this._inputElement = React.createRef();
              _this._onClickFocus = function () {
                  var inputElement = _this._inputElement.current;
                  if (inputElement) {
                      _this.focus();
                      inputElement.selectionStart = inputElement.selectionEnd = 0;
                  }
              };
              _this._onFocusCapture = function (ev) {
                  _this.setState({
                      hasFocus: true
                  });
                  _this._events.on(ev.currentTarget, 'blur', _this._onBlur, true);
                  if (_this.props.onFocus) {
                      _this.props.onFocus(ev);
                  }
              };
              _this._onClearClick = function (ev) {
                  var clearButtonProps = _this.props.clearButtonProps;
                  if (clearButtonProps && clearButtonProps.onClick) {
                      clearButtonProps.onClick(ev);
                  }
                  if (!ev.defaultPrevented) {
                      _this._onClear(ev);
                  }
              };
              _this._onKeyDown = function (ev) {
                  switch (ev.which) {
                      case Utilities_1.KeyCodes.escape:
                          _this.props.onEscape && _this.props.onEscape(ev);
                          if (!ev.defaultPrevented) {
                              _this._onClear(ev);
                          }
                          break;
                      case Utilities_1.KeyCodes.enter:
                          if (_this.props.onSearch) {
                              _this.props.onSearch(_this.state.value);
                          }
                          break;
                      default:
                          _this.props.onKeyDown && _this.props.onKeyDown(ev);
                          if (!ev.defaultPrevented) {
                              return;
                          }
                  }
                  // We only get here if the keypress has been handled,
                  // or preventDefault was called in case of default keyDown handler
                  ev.preventDefault();
                  ev.stopPropagation();
              };
              _this._onBlur = function (ev) {
                  _this._events.off(_this._rootElement.current, 'blur');
                  _this.setState({
                      hasFocus: false
                  });
                  if (_this.props.onBlur) {
                      _this.props.onBlur(ev);
                  }
              };
              _this._onInputChange = function (ev) {
                  var value = ev.target.value;
                  if (value === _this._latestValue) {
                      return;
                  }
                  _this._latestValue = value;
                  _this.setState({ value: value });
                  _this._callOnChange(value);
              };
              _this._warnDeprecations({
                  labelText: 'placeholder',
                  defaultValue: 'value'
              });
              _this._latestValue = props.value || '';
              _this.state = {
                  value: _this._latestValue,
                  hasFocus: false,
                  id: Utilities_1.getId('SearchBox')
              };
              return _this;
          }
          SearchBoxBase.prototype.componentWillReceiveProps = function (newProps) {
              if (newProps.value !== undefined) {
                  this._latestValue = newProps.value;
                  // If the user passes in null, substitute an empty string
                  // (passing null is not allowed per typings, but users might do it anyway)
                  this.setState({
                      value: newProps.value || ''
                  });
              }
          };
          SearchBoxBase.prototype.render = function () {
              var _a = this.props, ariaLabel = _a.ariaLabel, placeholder = _a.placeholder, className = _a.className, disabled = _a.disabled, underlined = _a.underlined, styles = _a.styles, labelText = _a.labelText, theme = _a.theme, clearButtonProps = _a.clearButtonProps, disableAnimation = _a.disableAnimation, iconProps = _a.iconProps;
              var _b = this.state, value = _b.value, hasFocus = _b.hasFocus, id = _b.id;
              var placeholderValue = labelText === undefined ? placeholder : labelText;
              var classNames = getClassNames(styles, {
                  theme: theme,
                  className: className,
                  underlined: underlined,
                  hasFocus: hasFocus,
                  disabled: disabled,
                  hasInput: value.length > 0,
                  disableAnimation: disableAnimation
              });
              var nativeProps = Utilities_1.getNativeProps(this.props, Utilities_1.inputProperties, ['id', 'className', 'placeholder', 'onFocus', 'onBlur', 'value']);
              return (React.createElement("div", { ref: this._rootElement, className: classNames.root, onFocusCapture: this._onFocusCapture },
                  React.createElement("div", { className: classNames.iconContainer, onClick: this._onClickFocus, "aria-hidden": true },
                      React.createElement(Icon_1.Icon, tslib_1.__assign({ iconName: "Search" }, iconProps, { className: classNames.icon }))),
                  React.createElement("input", tslib_1.__assign({}, nativeProps, { id: id, className: classNames.field, placeholder: placeholderValue, onChange: this._onInputChange, onInput: this._onInputChange, onKeyDown: this._onKeyDown, value: value, disabled: disabled, "aria-label": ariaLabel ? ariaLabel : placeholder, ref: this._inputElement })),
                  value.length > 0 && (React.createElement("div", { className: classNames.clearButton },
                      React.createElement(Button_1.IconButton, tslib_1.__assign({ styles: { root: { height: 'auto' }, icon: { fontSize: '12px' } }, iconProps: { iconName: 'Clear' } }, clearButtonProps, { onClick: this._onClearClick }))))));
          };
          /**
           * Sets focus to the search box input field
           */
          SearchBoxBase.prototype.focus = function () {
              if (this._inputElement.current) {
                  this._inputElement.current.focus();
              }
          };
          /**
           * Returns whether or not the SearchBox has focus
           */
          SearchBoxBase.prototype.hasFocus = function () {
              return !!this.state.hasFocus;
          };
          SearchBoxBase.prototype._onClear = function (ev) {
              this.props.onClear && this.props.onClear(ev);
              if (!ev.defaultPrevented) {
                  this._latestValue = '';
                  this.setState({
                      value: ''
                  });
                  this._callOnChange('');
                  ev.stopPropagation();
                  ev.preventDefault();
                  this.focus();
              }
          };
          SearchBoxBase.prototype._callOnChange = function (newValue) {
              var _a = this.props, onChange = _a.onChange, onChanged = _a.onChanged;
              // Call @deprecated method.
              if (onChanged) {
                  onChanged(newValue);
              }
              if (onChange) {
                  onChange(newValue);
              }
          };
          SearchBoxBase.defaultProps = {
              disableAnimation: false,
              clearButtonProps: { ariaLabel: 'Clear text' }
          };
          return SearchBoxBase;
      }(Utilities_1.BaseComponent));
      exports.SearchBoxBase = SearchBoxBase;
  });
  //# sourceMappingURL=SearchBox.base.js.map