@skbkontur/react-ui 0.0.0-5a76463ffc → 0.0.0-60bf3b9da8

package/components/Select/Select/Select.js

@@ -5,28 +5,24 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _dec, _class, _class2, _temp;
 
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it;
-
-  if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-      if (it) o = it;
-      var i = 0;
-      return function () {
-        if (i >= o.length) return {
-          done: true
-        };
-        return {
-          done: false,
-          value: o[i++]
-        };
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
       };
-    }
-
-    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
   }
 
-  it = o[Symbol.iterator]();
-  return it.next.bind(it);
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
 function _unsupportedIterableToArray(o, minLen) {
@@ -49,10 +45,7 @@ function _arrayLikeToArray(arr, len) {
 }
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
 import invariant from 'invariant';
-import cn from 'classnames';
 import { isKeyArrowDown, isKeyArrowUp, isKeyArrowVertical, isKeyEnter, isKeyEscape, isKeySpace } from "../../../lib/events/keyboard/identifiers";
 import { locale } from "../../../lib/locale/decorators";
 import { reactGetTextContent } from "../../../lib/reactGetTextContent";
@@ -65,12 +58,21 @@ import { MenuItem } from "../../MenuItem";
 import { MenuSeparator } from "../../MenuSeparator";
 import { RenderLayer } from "../../../internal/RenderLayer";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
-import { isFunction } from "../../../lib/utils";
+import { getRandomID, isFunction, isNonNullable, isReactUINode } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { ArrowChevronDownIcon } from "../../../internal/icons/16px";
+import { MobilePopup } from "../../../internal/MobilePopup";
+import { cx } from "../../../lib/theming/Emotion";
+import { responsiveLayout } from "../../ResponsiveLayout/decorator";
+import { getRootNode, rootNode } from "../../../lib/rootNode";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+import { globalThat } from "../../../lib/SSRSafe";
+import { ArrowDownIcon } from "../ArrowDownIcon";
 import { Item } from "../Item";
 import { SelectLocaleHelper } from "../locale";
-import { jsStyles } from "../Select.styles";
+import { styles } from "../Select.styles";
 import { getSelectTheme } from "../selectTheme";
 var PASS_BUTTON_PROPS = {
   disabled: true,
@@ -82,7 +84,14 @@ var PASS_BUTTON_PROPS = {
   onMouseLeave: true,
   onMouseOver: true
 };
-export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+export var SelectDataTids = {
+  root: 'Select__root',
+  menu: 'Select__menu'
+};
+export var SelectIds = {
+  menu: SelectDataTids.menu
+};
+export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayout(_class = rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Select, _React$Component);
 
   function Select() {
@@ -98,9 +107,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
       value: _this.props.defaultValue,
       searchPattern: ''
     };
-    _this.theme = void 0;
-    _this.locale = void 0;
-    _this.menu = void 0;
+    _this.menuId = SelectIds.menu + getRandomID();
     _this.buttonElement = null;
     _this.getProps = createPropsGetter(Select.defaultProps);
 
@@ -135,8 +142,83 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
       }
     };
 
+    _this.getDefaultButtonParams = function () {
+      var _this$renderLabel = _this.renderLabel(),
+          label = _this$renderLabel.label,
+          isPlaceholder = _this$renderLabel.isPlaceholder;
+
+      var buttonParams = {
+        opened: _this.state.opened,
+        label: label,
+        isPlaceholder: isPlaceholder,
+        onClick: _this.toggle,
+        onKeyDown: _this.handleKey
+      };
+      return buttonParams;
+    };
+
+    _this.getSearch = function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.search(),
+        onKeyDown: _this.handleKey
+      }, /*#__PURE__*/React.createElement(Input, {
+        ref: _this.focusInput,
+        onValueChange: _this.handleSearch,
+        width: "100%"
+      }));
+    };
+
+    _this.getMobileSearch = function () {
+      return /*#__PURE__*/React.createElement(Input, {
+        autoFocus: true,
+        value: _this.state.searchPattern,
+        ref: _this.focusInput,
+        onValueChange: _this.handleSearch,
+        width: "100%"
+      });
+    };
+
+    _this.getMenuItems = function (value) {
+      var isMobile = _this.isMobileLayout;
+      return _this.mapItems(function (iValue, item, i, comment) {
+        if (isFunction(item)) {
+          var element = item();
+
+          if ( /*#__PURE__*/React.isValidElement(element)) {
+            return /*#__PURE__*/React.cloneElement(element, {
+              key: i,
+              isMobile: isMobile
+            });
+          }
+
+          return null;
+        }
+
+        if ( /*#__PURE__*/React.isValidElement(item)) {
+          if (isReactUINode('MenuItem', item)) {
+            return /*#__PURE__*/React.cloneElement(item, {
+              key: i,
+              isMobile: isMobile
+            });
+          }
+
+          return /*#__PURE__*/React.cloneElement(item, {
+            key: i
+          });
+        }
+
+        return /*#__PURE__*/React.createElement(MenuItem, {
+          key: i,
+          state: _this.areValuesEqual(iValue, value) ? 'selected' : null,
+          onClick: _this.select.bind(_assertThisInitialized(_this), iValue),
+          comment: comment,
+          isMobile: isMobile
+        }, _this.getProps().renderItem(iValue, item));
+      });
+    };
+
     _this.dropdownContainerGetParent = function () {
-      return ReactDOM.findDOMNode(_assertThisInitialized(_this));
+      return getRootNode(_assertThisInitialized(_this));
     };
 
     _this.focusInput = function (input) {
@@ -209,9 +291,13 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
     };
 
     _this.handleSearch = function (value) {
+      var _this$menu;
+
       _this.setState({
         searchPattern: value
       });
+
+      (_this$menu = _this.menu) == null ? void 0 : _this$menu.highlightItem(1);
     };
 
     _this.buttonRef = function (element) {
@@ -224,7 +310,10 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
       return /*#__PURE__*/React.isValidElement(buttonElement) ? /*#__PURE__*/React.cloneElement(buttonElement, {
         ref: _this.buttonRef,
         onFocus: _this.props.onFocus,
-        onBlur: _this.props.onBlur
+        onBlur: _this.props.onBlur,
+        'aria-describedby': _this.props['aria-describedby'],
+        'aria-expanded': _this.state.opened ? 'true' : 'false',
+        'aria-controls': _this.menuId
       }) : buttonElement;
     };
 
@@ -235,11 +324,11 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
 
   _proto.componentDidUpdate = function componentDidUpdate(_prevProps, prevState) {
     if (!prevState.opened && this.state.opened) {
-      window.addEventListener('popstate', this.close);
+      globalThat.addEventListener('popstate', this.close);
     }
 
     if (prevState.opened && !this.state.opened) {
-      window.removeEventListener('popstate', this.close);
+      globalThat.removeEventListener('popstate', this.close);
     }
   };
 
@@ -247,49 +336,68 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
     var _this2 = this;
 
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
+      _this2.theme = ThemeFactory.create({
+        menuOffsetY: theme.selectMenuOffsetY
+      }, theme);
       return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-        value: getSelectTheme(theme, _this2.props)
+        value: _this2.theme
       }, _this2.renderMain());
     });
   }
-  /**
-  * @public
+  /**
+  * @public
   */
   ;
 
+  _proto.getMenuRenderer = function getMenuRenderer() {
+    if (this.props.disabled) {
+      return null;
+    }
+
+    if (this.isMobileLayout) {
+      return this.renderMobileMenu();
+    }
+
+    if (this.state.opened) {
+      return this.renderMenu();
+    }
+
+    return null;
+  };
+
   _proto.renderMain = function renderMain() {
-    var _this$renderLabel = this.renderLabel(),
-        label = _this$renderLabel.label,
-        isPlaceholder = _this$renderLabel.isPlaceholder;
-
-    var buttonParams = {
-      opened: this.state.opened,
-      label: label,
-      isPlaceholder: isPlaceholder,
-      onClick: this.toggle,
-      onKeyDown: this.handleKey
-    };
+    var _cx;
+
+    var buttonParams = this.getDefaultButtonParams();
+    var button = /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+      value: getSelectTheme(this.theme, this.props)
+    }, this.getButton(buttonParams));
+    var isMobile = this.isMobileLayout;
     var style = {
       width: this.props.width,
       maxWidth: this.props.maxWidth || undefined
     };
-    var button = this.getButton(buttonParams);
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(RenderLayer, {
+    var root = /*#__PURE__*/React.createElement("span", {
+      "data-tid": SelectDataTids.root,
+      className: cx((_cx = {}, _cx[styles.root()] = true, _cx[styles.rootMobile(this.theme)] = isMobile, _cx)),
+      style: style
+    }, button, this.getMenuRenderer());
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement(RenderLayer, {
       onClickOutside: this.close,
       onFocusOutside: this.close,
-      active: this.state.opened
-    }, /*#__PURE__*/React.createElement("span", {
-      className: jsStyles.root(this.theme),
-      style: style
-    }, button, !this.props.disabled && this.state.opened && this.renderMenu())));
+      active: isMobile ? false : this.state.opened
+    }, root));
   };
 
   _proto.renderLabel = function renderLabel() {
+    var _this$locale;
+
     var value = this.getValue();
     var item = this.getItemByValue(value);
 
-    if (item != null || value != null) {
+    if (isNonNullable(value)) {
       return {
         label: this.getProps().renderValue(value, item),
         isPlaceholder: false
@@ -297,13 +405,31 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
     }
 
     return {
-      label: /*#__PURE__*/React.createElement("span", null, this.props.placeholder || this.locale.placeholder),
+      label: /*#__PURE__*/React.createElement("span", null, this.props.placeholder || ((_this$locale = this.locale) == null ? void 0 : _this$locale.placeholder)),
       isPlaceholder: true
     };
   };
 
+  _proto.getLeftIconClass = function getLeftIconClass(size) {
+    if (this.getProps().use === 'link') {
+      return styles.leftIconLink(this.theme);
+    }
+
+    switch (size) {
+      case 'large':
+        return styles.leftIconLarge(this.theme);
+
+      case 'medium':
+        return styles.leftIconMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.leftIconSmall(this.theme);
+    }
+  };
+
   _proto.renderDefaultButton = function renderDefaultButton(params) {
-    var _cn;
+    var _cx2, _cx3;
 
     var buttonProps = _extends({}, filterProps(this.props, PASS_BUTTON_PROPS), {
       align: 'left',
@@ -314,122 +440,82 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
       active: params.opened
     });
 
-    if (this.props._icon) {
-      Object.assign(buttonProps, {
-        icon: this.props._icon,
-        _noRightPadding: true
-      });
-    }
-
+    var use = this.getProps().use;
     var labelProps = {
-      className: cn((_cn = {}, _cn[jsStyles.label()] = this.props.use !== 'link', _cn[jsStyles.placeholder(this.theme)] = params.isPlaceholder, _cn[jsStyles.customUsePlaceholder()] = params.isPlaceholder && this.props.use !== 'default', _cn)),
+      className: cx((_cx2 = {}, _cx2[styles.label()] = use !== 'link', _cx2[styles.placeholder(this.theme)] = params.isPlaceholder, _cx2[styles.customUsePlaceholder()] = params.isPlaceholder && use !== 'default', _cx2[styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx2)),
       style: {
-        paddingRight: this.getLabelPaddingRight()
+        paddingRight: this.getSelectIconGap()
       }
     };
-    var useIsCustom = this.props.use !== 'default';
-    return /*#__PURE__*/React.createElement(Button, buttonProps, /*#__PURE__*/React.createElement("span", labelProps, /*#__PURE__*/React.createElement("span", {
-      className: jsStyles.labelText()
-    }, params.label)), /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.arrowWrap(),
-      style: {
-        right: this.getLegacyArrowShift()
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cn(jsStyles.arrow(this.theme), useIsCustom && jsStyles.customUseArrow())
-    })));
+    var useIsCustom = use !== 'default';
+    var icon = isTheme2022(this.theme) ? /*#__PURE__*/React.createElement(ArrowDownIcon, {
+      size: this.props.size
+    }) : /*#__PURE__*/React.createElement(ArrowChevronDownIcon, null);
+    return /*#__PURE__*/React.createElement(Button, buttonProps, /*#__PURE__*/React.createElement("div", {
+      className: styles.selectButtonContainer()
+    }, this.props._icon && /*#__PURE__*/React.createElement("div", {
+      className: this.getLeftIconClass(this.props.size)
+    }, this.props._icon), /*#__PURE__*/React.createElement("span", labelProps, params.label), /*#__PURE__*/React.createElement("div", {
+      className: cx(styles.arrowWrap(this.theme), (_cx3 = {}, _cx3[styles.arrowDisabled(this.theme)] = this.props.disabled, _cx3[styles.customUseArrow()] = useIsCustom, _cx3))
+    }, icon)));
   };
 
-  _proto.getLabelPaddingRight = function getLabelPaddingRight() {
+  _proto.getSelectIconGap = function getSelectIconGap() {
     var _this3 = this;
 
     var getArrowPadding = function getArrowPadding() {
       switch (_this3.props.size) {
         case 'large':
-          return _this3.theme.selectPaddingArrowLarge;
+          return _this3.theme.selectIconGapLarge;
 
         case 'medium':
-          return _this3.theme.selectPaddingArrowMedium;
+          return _this3.theme.selectIconGapMedium;
 
         case 'small':
         default:
-          return _this3.theme.selectPaddingArrowSmall;
+          return _this3.theme.selectIconGapSmall;
       }
     };
 
-    var ARROW_WIDTH = 8;
     var arrowLeftPadding = parseFloat(getArrowPadding()) || 0;
-    return ARROW_WIDTH + arrowLeftPadding + (this.props._icon ? 10 : 0) + this.getLegacyArrowShift();
-  };
-
-  _proto.getLegacyArrowShift = function getLegacyArrowShift() {
-    var _this4 = this;
-
-    var getSelectPadding = function getSelectPadding() {
-      switch (_this4.props.size) {
-        case 'large':
-          return _this4.theme.selectPaddingXLarge;
-
-        case 'medium':
-          return _this4.theme.selectPaddingXMedium;
-
-        case 'small':
-        default:
-          return _this4.theme.selectPaddingXSmall;
-      }
-    };
-
-    var selectPadding = parseFloat(getSelectPadding()) || 0;
-    return this.props.use === 'link' ? 10 : 1 + (this.props._icon ? selectPadding : 0);
+    return arrowLeftPadding;
   };
 
   _proto.renderMenu = function renderMenu() {
-    var _this5 = this;
-
-    var search = this.props.search ? /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.search()
-    }, /*#__PURE__*/React.createElement(Input, {
-      ref: this.focusInput,
-      onValueChange: this.handleSearch,
-      width: "100%"
-    })) : null;
+    var search = this.props.search ? this.getSearch() : null;
     var value = this.getValue();
+    var hasFixedWidth = !!this.props.menuWidth && this.props.menuWidth !== 'auto';
     return /*#__PURE__*/React.createElement(DropdownContainer, {
+      id: this.menuId,
+      "data-tid": SelectDataTids.menu,
       getParent: this.dropdownContainerGetParent,
-      offsetY: -1,
       align: this.props.menuAlign,
-      disablePortal: this.props.disablePortal
+      disablePortal: this.props.disablePortal,
+      hasFixedWidth: hasFixedWidth,
+      menuPos: this.props.menuPos
     }, /*#__PURE__*/React.createElement(Menu, {
       ref: this.refMenu,
       width: this.props.menuWidth,
       onItemClick: this.close,
-      maxHeight: this.props.maxMenuHeight
-    }, search, this.mapItems(function (iValue, item, i, comment) {
-      if (isFunction(item)) {
-        var element = item();
-
-        if ( /*#__PURE__*/React.isValidElement(element)) {
-          return /*#__PURE__*/React.cloneElement(element, {
-            key: i
-          });
-        }
-
-        return null;
-      }
-
-      if ( /*#__PURE__*/React.isValidElement(item)) {
-        return /*#__PURE__*/React.cloneElement(item, {
-          key: i
-        });
-      }
+      maxHeight: this.props.maxMenuHeight,
+      align: this.props.menuAlign
+    }, search, this.getMenuItems(value)));
+  };
 
-      return /*#__PURE__*/React.createElement(MenuItem, {
-        key: i,
-        state: _this5.getProps().areValuesEqual(iValue, value) ? 'selected' : null,
-        onClick: _this5.select.bind(_this5, iValue),
-        comment: comment
-      }, _this5.getProps().renderItem(iValue, item));
-    })));
+  _proto.renderMobileMenu = function renderMobileMenu() {
+    var search = this.props.search ? this.getMobileSearch() : null;
+    var value = this.getValue();
+    return /*#__PURE__*/React.createElement(MobilePopup, {
+      headerChildComponent: search,
+      caption: this.props.mobileMenuHeaderText,
+      onCloseRequest: this.close,
+      opened: this.state.opened
+    }, /*#__PURE__*/React.createElement(Menu, {
+      hasShadow: false,
+      onItemClick: this.close,
+      disableScrollContainer: true,
+      maxHeight: 'auto'
+    }, this.getMenuItems(value)));
   };
 
   _proto.select = function select(value) {
@@ -439,8 +525,10 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
       value: value
     });
 
-    if (this.props.onValueChange && !this.getProps().areValuesEqual(this.getValue(), value)) {
-      this.props.onValueChange(value);
+    if (!this.areValuesEqual(this.getValue(), value)) {
+      var _this$props$onValueCh, _this$props;
+
+      (_this$props$onValueCh = (_this$props = this.props).onValueChange) == null ? void 0 : _this$props$onValueCh.call(_this$props, value);
     }
   };
 
@@ -494,7 +582,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
           itemValue = _normalizeEntry2[0],
           _item2 = _normalizeEntry2[1];
 
-      if (this.getProps().areValuesEqual(itemValue, value)) {
+      if (this.areValuesEqual(itemValue, value)) {
         return _item2;
       }
     }
@@ -502,29 +590,12 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
     return null;
   };
 
+  _proto.areValuesEqual = function areValuesEqual(value1, value2) {
+    return isNonNullable(value1) && isNonNullable(value2) && this.getProps().areValuesEqual(value1, value2);
+  };
+
   return Select;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Select', _class2.propTypes = {
-  areValuesEqual: PropTypes.func,
-  defaultValue: PropTypes.any,
-  disablePortal: PropTypes.bool,
-  disabled: PropTypes.bool,
-  error: PropTypes.bool,
-  filterItem: PropTypes.func,
-  items: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-  maxMenuHeight: PropTypes.number,
-  maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  placeholder: PropTypes.node,
-  renderItem: PropTypes.func,
-  renderValue: PropTypes.func,
-  search: PropTypes.bool,
-  value: PropTypes.any,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  onValueChange: PropTypes.func,
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  onKeyDown: PropTypes.func
-}, _class2.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Select', _class2.defaultProps = {
   renderValue: renderValue,
   renderItem: renderItem,
   areValuesEqual: areValuesEqual,
@@ -535,7 +606,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), _dec(_class =
 }, _class2["static"] = function (element) {
   invariant( /*#__PURE__*/React.isValidElement(element) || typeof element === 'function', 'Select.static(element) expects element to be a valid react element.');
   return element;
-}, _temp)) || _class);
+}, _temp)) || _class) || _class) || _class);
 
 function renderValue(value, item) {
   return item;
@@ -552,27 +623,41 @@ function areValuesEqual(value1, value2) {
 function normalizeEntry(entry) {
   if (Array.isArray(entry)) {
     return entry;
-  } else {
-    return [entry, entry, undefined];
   }
+
+  return [entry, entry, undefined];
 }
 
-function filterItem(value, item, pattern) {
-  if (item === Select.SEP) {
-    return false;
+var getTextFromItem = function getTextFromItem(item) {
+  if (typeof item === 'string') {
+    return item;
+  }
+
+  if (isFunction(item)) {
+    return getTextFromItem(item());
   }
 
-  if ( /*#__PURE__*/React.isValidElement(item) || isFunction(item) && /*#__PURE__*/React.isValidElement(item = item())) {
-    item = reactGetTextContent(item);
+  if ( /*#__PURE__*/React.isValidElement(item)) {
+    return reactGetTextContent(item);
   }
 
   if (typeof item === 'number') {
-    item = item.toString(10);
+    return item.toString(10);
+  }
+
+  return '';
+};
+
+function filterItem(value, item, pattern) {
+  if (item === Select.SEP) {
+    return false;
   }
 
-  if (typeof item !== 'string') {
+  var itemText = getTextFromItem(item);
+
+  if (!itemText) {
     return false;
   }
 
-  return item.toLowerCase().indexOf(pattern) !== -1;
+  return itemText.toLowerCase().indexOf(pattern) !== -1;
 }