@skbkontur/react-ui 0.0.0-50f666af0e → 0.0.0-52df310f7c

package/cjs/components/Select/Select.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode, ReactPortal, AriaAttributes } from 'react';
 import { ButtonSize, ButtonUse } from '../Button';
+import { DropdownContainerProps } from '../../internal/DropdownContainer';
 import { Nullable } from '../../typings/utility-types';
+import { CommonProps } from '../../internal/CommonWrapper';
 import { Item } from './Item';
 export interface ButtonParams {
     disabled?: boolean;
@@ -10,22 +11,25 @@ export interface ButtonParams {
     onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
     opened: boolean;
     isPlaceholder: boolean;
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
 }
-export interface SelectProps<TValue, TItem> {
+export declare const SelectDataTids: {
+    readonly root: "Select__root";
+};
+declare type SelectItem<TValue, TItem> = [TValue, TItem, React.ReactNode?] | TItem | TValue | React.ReactElement | (() => React.ReactElement);
+export interface SelectProps<TValue, TItem> extends CommonProps, Pick<DropdownContainerProps, 'menuPos'> {
     /** @ignore */
-    _icon?: React.ReactElement<any>;
+    _icon?: React.ReactNode;
     /** @ignore */
     _renderButton?: (params: ButtonParams) => React.ReactNode;
     defaultValue?: TValue;
-    /** @deprecated @ignore */
-    diadocLinkIcon?: React.ReactElement<any>;
     /**
      * Отключает использование портала
      */
     disablePortal?: boolean;
     disabled?: boolean;
     /**
-     * Визуально показать наличие ошибки.
+     * Состояние валидации при ошибке.
      */
     error?: boolean;
     filterItem?: (value: TValue, item: TItem, pattern: string) => boolean;
@@ -53,7 +57,7 @@ export interface SelectProps<TValue, TItem> {
      * <Select.Item>My Element</Select.Item>
      * ```
      */
-    items?: Array<[TValue, TItem, React.ReactNode?] | TItem | React.ReactElement | (() => React.ReactElement)>;
+    items?: Array<SelectItem<TValue, TItem>>;
     maxMenuHeight?: number;
     maxWidth?: React.CSSProperties['maxWidth'];
     menuAlign?: 'left' | 'right';
@@ -85,57 +89,43 @@ export interface SelectProps<TValue, TItem> {
     search?: boolean;
     value?: TValue;
     width?: number | string;
+    /**
+     * Состояние валидации при предупреждении.
+     */
     warning?: boolean;
     use?: ButtonUse;
     size?: ButtonSize;
     onFocus?: React.FocusEventHandler<HTMLElement>;
     onBlur?: React.FocusEventHandler<HTMLElement>;
+    /**
+     * Текст заголовка выпадающего меню в мобильной версии
+     */
+    mobileMenuHeaderText?: string;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
 }
 export interface SelectState<TValue> {
     opened: boolean;
-    searchPattern?: string;
+    searchPattern: string;
     value: Nullable<TValue>;
 }
+declare type DefaultProps<TValue, TItem> = Required<Pick<SelectProps<TValue, TItem>, 'renderValue' | 'renderItem' | 'areValuesEqual' | 'filterItem' | 'use'>>;
 export declare class Select<TValue = {}, TItem = {}> extends React.Component<SelectProps<TValue, TItem>, SelectState<TValue>> {
     static __KONTUR_REACT_UI__: string;
-    static propTypes: {
-        areValuesEqual: PropTypes.Requireable<(...args: any[]) => any>;
-        defaultValue: PropTypes.Requireable<any>;
-        disablePortal: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        error: PropTypes.Requireable<boolean>;
-        filterItem: PropTypes.Requireable<(...args: any[]) => any>;
-        items: PropTypes.Requireable<object>;
-        maxMenuHeight: PropTypes.Requireable<number>;
-        maxWidth: PropTypes.Requireable<string | number>;
-        placeholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        renderItem: PropTypes.Requireable<(...args: any[]) => any>;
-        renderValue: PropTypes.Requireable<(...args: any[]) => any>;
-        search: PropTypes.Requireable<boolean>;
-        value: PropTypes.Requireable<any>;
-        width: PropTypes.Requireable<string | number>;
-        onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
-        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        renderValue: typeof renderValue;
-        renderItem: typeof renderItem;
-        areValuesEqual: typeof areValuesEqual;
-        filterItem: typeof filterItem;
-        use: string;
-    };
+    static defaultProps: DefaultProps<unknown, ReactNode | ReactPortal>;
     static Item: typeof Item;
     static SEP: () => JSX.Element;
-    static static: (element: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | (() => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>)) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | (() => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>);
+    static static: (element: React.ReactElement | (() => React.ReactElement)) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | (() => React.ReactElement);
     state: SelectState<TValue>;
     private theme;
+    private isMobileLayout;
     private readonly locale;
     private menu;
     private buttonElement;
     private getProps;
+    private setRootNode;
     componentDidUpdate(_prevProps: SelectProps<TValue, TItem>, prevState: SelectState<TValue>): void;
     render(): JSX.Element;
     /**
@@ -150,11 +140,18 @@ export declare class Select<TValue = {}, TItem = {}> extends React.Component<Sel
      * @public
      */
     focus: () => void;
+    private getMenuRenderer;
     private renderMain;
+    private getDefaultButtonParams;
     private renderLabel;
+    private getLeftIconClass;
     private renderDefaultButton;
-    private renderLinkButton;
+    private getSelectIconGap;
     private renderMenu;
+    private getSearch;
+    private renderMobileMenu;
+    private getMobileSearch;
+    private getMenuItems;
     private dropdownContainerGetParent;
     private focusInput;
     private refMenu;
@@ -165,11 +162,8 @@ export declare class Select<TValue = {}, TItem = {}> extends React.Component<Sel
     private getValue;
     private mapItems;
     private getItemByValue;
+    private areValuesEqual;
     private buttonRef;
     private getButton;
 }
-declare function renderValue(value: any, item: any): any;
-declare function renderItem(value: any, item: any): any;
-declare function areValuesEqual(value1: any, value2: any): boolean;
-declare function filterItem(value: any, item: any, pattern: string): boolean;
 export {};

package/cjs/components/Select/Select.js

@@ -1,9 +1,5 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Select = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SelectDataTids = exports.Select = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _invariant = _interopRequireDefault(require("invariant"));
-var _warning = _interopRequireDefault(require("warning"));
-var _classnames = _interopRequireDefault(require("classnames"));
 
 var _identifiers = require("../../lib/events/keyboard/identifiers");
 
@@ -19,7 +15,6 @@ var _Button = require("../Button");
 var _DropdownContainer = require("../../internal/DropdownContainer");
 var _filterProps = require("../../lib/filterProps");
 var _Input = require("../Input");
-var _Link = require("../Link");
 var _Menu = require("../../internal/Menu");
 var _MenuItem = require("../MenuItem");
 var _MenuSeparator = require("../MenuSeparator");
@@ -29,10 +24,18 @@ var _createPropsGetter = require("../../lib/createPropsGetter");
 var _utils = require("../../lib/utils");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _px = require("../../internal/icons/16px");
+var _MobilePopup = require("../../internal/MobilePopup");
+var _Emotion = require("../../lib/theming/Emotion");
+var _decorator = require("../ResponsiveLayout/decorator");
+var _rootNode = require("../../lib/rootNode");
 
 var _Item = require("./Item");
 var _locale = require("./locale");
-var _Select = require("./Select.styles");var _dec, _class, _class2, _temp;
+var _Select = require("./Select.styles");
+var _selectTheme = require("./selectTheme");var _dec, _class, _class2, _temp;function _createForOfIteratorHelperLoose(o, allowArrayLike) {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 };return { done: false, value: o[i++] };};}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) {if (!o) return;if (typeof o === "string") return _arrayLikeToArray(o, minLen);var n = Object.prototype.toString.call(o).slice(8, -1);if (n === "Object" && o.constructor) n = o.constructor.name;if (n === "Map" || n === "Set") return Array.from(o);if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);}function _arrayLikeToArray(arr, len) {if (len == null || len > arr.length) len = arr.length;for (var i = 0, arr2 = new Array(len); i < len; i++) {arr2[i] = arr[i];}return arr2;}
+
 
 
 
@@ -52,8 +55,11 @@ var PASS_BUTTON_PROPS = {
 
   onMouseEnter: true,
   onMouseLeave: true,
-  onMouseOver: true };var
+  onMouseOver: true };
+
 
+var SelectDataTids = {
+  root: 'Select__root' };exports.SelectDataTids = SelectDataTids;var
 
 
 
@@ -147,7 +153,6 @@ var PASS_BUTTON_PROPS = {
 
 
 
-Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Select, _React$Component);function Select() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -173,6 +178,7 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
 
 
 
+Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper), (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Select, _React$Component);function Select() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -196,12 +202,14 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
 
     state = {
       opened: false,
-      value: _this.props.defaultValue };_this.
+      value: _this.props.defaultValue,
+      searchPattern: '' };_this.
+
+
+
+
 
 
-    theme = void 0;_this.
-    locale = void 0;_this.
-    menu = void 0;_this.
     buttonElement = null;_this.
     getProps = (0, _createPropsGetter.createPropsGetter)(Select.defaultProps);_this.
 
@@ -226,6 +234,7 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
 
 
 
+
 
 
     open = function () {
@@ -243,7 +252,7 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
 
     close = function () {
       if (_this.state.opened) {
-        _this.setState({ opened: false });
+        _this.setState({ opened: false, searchPattern: '' });
 
         if (_this.props.onClose) {
           _this.props.onClose();
@@ -294,6 +303,63 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    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,
+        'aria-describedby': _this.props['aria-describedby'] };
+
+
+      return buttonParams;
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -398,6 +464,13 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
 
 
 
+    getSearch = function () {
+      return /*#__PURE__*/(
+        _react.default.createElement("div", { className: _Select.styles.search(), onKeyDown: _this.handleKey }, /*#__PURE__*/
+        _react.default.createElement(_Input.Input, { ref: _this.focusInput, onValueChange: _this.handleSearch, width: "100%" })));
+
+
+    };_this.
 
 
 
@@ -417,17 +490,57 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
 
 
 
+    getMobileSearch = function () {
+      return /*#__PURE__*/(
+        _react.default.createElement(_Input.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 ((0, _utils.isFunction)(item)) {
+          var element = item();
 
+          if ( /*#__PURE__*/_react.default.isValidElement(element)) {
+            return /*#__PURE__*/_react.default.cloneElement(element, { key: i, isMobile: isMobile });
+          }
 
+          return null;
+        }
 
+        if ( /*#__PURE__*/_react.default.isValidElement(item)) {
+          if ((0, _utils.isReactUINode)('MenuItem', item)) {
+            return /*#__PURE__*/_react.default.cloneElement(item, { key: i, isMobile: isMobile });
+          }
+          return /*#__PURE__*/_react.default.cloneElement(item, { key: i });
+        }
 
+        return /*#__PURE__*/(
+          _react.default.createElement(_MenuItem.MenuItem, {
+            key: i,
+            state: _this.areValuesEqual(iValue, value) ? 'selected' : null,
+            onClick: _this.select.bind((0, _assertThisInitialized2.default)(_this), iValue),
+            comment: comment,
+            isMobile: isMobile },
+
+          _this.getProps().renderItem(iValue, item)));
+
+
+      });
+
+    };_this.
 
     dropdownContainerGetParent = function () {
-      return _reactDom.default.findDOMNode((0, _assertThisInitialized2.default)(_this));
+      return (0, _rootNode.getRootNode)((0, _assertThisInitialized2.default)(_this));
     };_this.
 
     focusInput = function (input) {
@@ -484,8 +597,9 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
       }
     };_this.
 
-    handleSearch = function (value) {
+    handleSearch = function (value) {var _this$menu;
       _this.setState({ searchPattern: value });
+      (_this$menu = _this.menu) == null ? void 0 : _this$menu.highlightItem(1);
     };_this.
 
 
@@ -537,6 +651,10 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
 
 
 
+
+
+
+
 
 
 
@@ -553,16 +671,16 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
 
       var buttonElement = _react.default.Children.only(button);
 
-      return _react.default.isValidElement(buttonElement) ?
+      return /*#__PURE__*/_react.default.isValidElement(buttonElement) ? /*#__PURE__*/
       _react.default.cloneElement(buttonElement, {
         ref: _this.buttonRef,
         onFocus: _this.props.onFocus,
         onBlur: _this.props.onBlur }) :
 
       buttonElement;
-    };return _this;}var _proto = Select.prototype;_proto.componentDidUpdate = function componentDidUpdate(_prevProps, prevState) {if (!prevState.opened && this.state.opened) {window.addEventListener('popstate', this.close);}if (prevState.opened && !this.state.opened) {window.removeEventListener('popstate', this.close);}};_proto.render = function render() {var _this2 = this;return _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});} /**
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               * @public
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               */;_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 style = { width: this.props.width, maxWidth: this.props.maxWidth || undefined };var button = this.getButton(buttonParams);return _react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.close, onFocusOutside: this.close, active: this.state.opened }, _react.default.createElement("span", { className: _Select.jsStyles.root(this.theme), style: style }, button, !this.props.disabled && this.state.opened && this.renderMenu()));};_proto.renderLabel = function renderLabel() {var value = this.getValue();var item = this.getItemByValue(value);if (item != null || value != null) {return { label: this.getProps().renderValue(value, item), isPlaceholder: false };}return { label: _react.default.createElement("span", null, this.props.placeholder || this.locale.placeholder), isPlaceholder: true };};_proto.renderDefaultButton = function renderDefaultButton(params) {var _cn;if (this.props.diadocLinkIcon) {(0, _warning.default)(false, "diadocLinkIcon has been deprecated");return this.renderLinkButton(params);}var buttonProps = (0, _extends2.default)({}, (0, _filterProps.filterProps)(this.props, PASS_BUTTON_PROPS), { align: 'left', disabled: this.props.disabled, _noPadding: true, width: '100%', onClick: params.onClick, onKeyDown: params.onKeyDown, active: params.opened });if (this.props._icon) {Object.assign(buttonProps, { _noPadding: false, _noRightPadding: true, icon: this.props._icon });}var labelProps = { className: (0, _classnames.default)((_cn = {}, _cn[_Select.jsStyles.label()] = this.props.use !== 'link', _cn[_Select.jsStyles.labelWithLeftIcon()] = !!this.props._icon, _cn[_Select.jsStyles.placeholder(this.theme)] = params.isPlaceholder, _cn[_Select.jsStyles.customUsePlaceholder()] = params.isPlaceholder && this.props.use !== 'default', _cn)), style: { paddingRight: (buttonProps.size === 'large' ? 31 : 28) + (this.props._icon ? 10 : 0) } };var useIsCustom = this.props.use !== 'default';return _react.default.createElement(_Button.Button, buttonProps, _react.default.createElement("span", labelProps, _react.default.createElement("span", { className: _Select.jsStyles.labelText() }, params.label)), _react.default.createElement("div", { className: _Select.jsStyles.arrowWrap() }, _react.default.createElement("div", { className: (0, _classnames.default)(_Select.jsStyles.arrow(this.theme), useIsCustom && _Select.jsStyles.customUseArrow()) })));};_proto.renderLinkButton = function renderLinkButton(params) {var linkProps = { disabled: params.disabled, icon: this.props.diadocLinkIcon, _button: true, _buttonOpened: params.opened, onClick: params.onClick, onKeyDown: params.onKeyDown };return _react.default.createElement(_Link.Link, linkProps, params.label);};_proto.renderMenu = function renderMenu() {var _this3 = this;var search = this.props.search ? _react.default.createElement("div", { className: _Select.jsStyles.search() }, _react.default.createElement(_Input.Input, { ref: this.focusInput, onValueChange: this.handleSearch, width: "100%" })) : null;var value = this.getValue();return _react.default.createElement(_DropdownContainer.DropdownContainer, { getParent: this.dropdownContainerGetParent, offsetY: -1, align: this.props.menuAlign, disablePortal: this.props.disablePortal }, _react.default.createElement(_Menu.Menu, { ref: this.refMenu, width: this.props.menuWidth, onItemClick: this.close, maxHeight: this.props.maxMenuHeight }, search, this.mapItems(function (iValue, item, i, comment) {if ((0, _utils.isFunction)(item)) {var element = item();if (_react.default.isValidElement(element)) {return _react.default.cloneElement(element, { key: i });}return null;}if (_react.default.isValidElement(item)) {return _react.default.cloneElement(item, { key: i });}return _react.default.createElement(_MenuItem.MenuItem, { key: i, state: _this3.getProps().areValuesEqual(iValue, value) ? 'selected' : null, onClick: _this3.select.bind(_this3, iValue), comment: comment }, _this3.getProps().renderItem(iValue, item));})));};_proto.select = function select(value) {this.focus();this.setState({ opened: false, value: value });if (this.props.onValueChange && !this.getProps().areValuesEqual(this.getValue(), value)) {this.props.onValueChange(value);}};_proto.getValue = function getValue() {if (this.props.value !== undefined) {return this.props.value;}return this.state.value;};_proto.mapItems = function mapItems(fn) {var items = this.props.items;if (!items) {return [];}var pattern = this.state.searchPattern && this.state.searchPattern.toLowerCase();var result = [];var index = 0;for (var _iterator = items, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {var _ref;if (_isArray) {if (_i >= _iterator.length) break;_ref = _iterator[_i++];} else {_i = _iterator.next();if (_i.done) break;_ref = _i.value;}var entry = _ref;var _normalizeEntry = normalizeEntry(entry),_value = _normalizeEntry[0],_item = _normalizeEntry[1],_comment = _normalizeEntry[2];if (!pattern || this.getProps().filterItem(_value, _item, pattern)) {result.push(fn(_value, _item, index, _comment));++index;}}return result;};_proto.getItemByValue = function getItemByValue(value) {if (value === null || value === undefined) {return null;}var items = this.props.items || [];for (var _iterator2 = items, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {var _ref2;if (_isArray2) {if (_i2 >= _iterator2.length) break;_ref2 = _iterator2[_i2++];} else {_i2 = _iterator2.next();if (_i2.done) break;_ref2 = _i2.value;}var entry = _ref2;var _normalizeEntry2 = normalizeEntry(entry),itemValue = _normalizeEntry2[0],_item2 = _normalizeEntry2[1];if (this.getProps().areValuesEqual(itemValue, value)) {return _item2;}}return null;};return Select;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Select', _class2.propTypes = { areValuesEqual: _propTypes.default.func, defaultValue: _propTypes.default.any, disablePortal: _propTypes.default.bool, disabled: _propTypes.default.bool, error: _propTypes.default.bool, filterItem: _propTypes.default.func, items: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]), maxMenuHeight: _propTypes.default.number, maxWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]), placeholder: _propTypes.default.node, renderItem: _propTypes.default.func, renderValue: _propTypes.default.func, search: _propTypes.default.bool, value: _propTypes.default.any, width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]), onValueChange: _propTypes.default.func, onMouseEnter: _propTypes.default.func, onMouseLeave: _propTypes.default.func, onMouseOver: _propTypes.default.func, onKeyDown: _propTypes.default.func }, _class2.defaultProps = { renderValue: renderValue, renderItem: renderItem, areValuesEqual: areValuesEqual, filterItem: filterItem, use: 'default' }, _class2.Item = _Item.Item, _class2.SEP = function () {return _react.default.createElement(_MenuSeparator.MenuSeparator, null);}, _class2.static = function (element) {(0, _invariant.default)(_react.default.isValidElement(element) || typeof element === 'function', 'Select.static(element) expects element to be a valid react element.');return element;}, _temp)) || _class);exports.Select = Select;
+    };return _this;}var _proto = Select.prototype;_proto.componentDidUpdate = function componentDidUpdate(_prevProps, prevState) {if (!prevState.opened && this.state.opened) {window.addEventListener('popstate', this.close);}if (prevState.opened && !this.state.opened) {window.removeEventListener('popstate', this.close);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});} /**
+   * @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 _cx;var buttonParams = this.getDefaultButtonParams();var button = /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _selectTheme.getSelectTheme)(this.theme, this.props) }, this.getButton(buttonParams));var isMobile = this.isMobileLayout;var style = { width: this.props.width, maxWidth: this.props.maxWidth || undefined };var root = /*#__PURE__*/_react.default.createElement("span", { "data-tid": SelectDataTids.root, className: (0, _Emotion.cx)((_cx = {}, _cx[_Select.styles.root()] = true, _cx[_Select.styles.rootMobile(this.theme)] = isMobile, _cx)), style: style }, button, this.getMenuRenderer());return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.close, onFocusOutside: this.close, active: isMobile ? false : this.state.opened }, root));};_proto.renderLabel = function renderLabel() {var _this$locale;var value = this.getValue();var item = this.getItemByValue(value);if ((0, _utils.isNonNullable)(value)) {return { label: this.getProps().renderValue(value, item), isPlaceholder: false };}return { label: /*#__PURE__*/_react.default.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 _Select.styles.leftIconLink(this.theme);}switch (size) {case 'large':return _Select.styles.leftIconLarge(this.theme);case 'medium':return _Select.styles.leftIconMedium(this.theme);case 'small':default:return _Select.styles.leftIconSmall(this.theme);}};_proto.renderDefaultButton = function renderDefaultButton(params) {var _cx2, _cx3;var buttonProps = (0, _extends2.default)({}, (0, _filterProps.filterProps)(this.props, PASS_BUTTON_PROPS), { align: 'left', disabled: this.props.disabled, width: '100%', onClick: params.onClick, onKeyDown: params.onKeyDown, active: params.opened, 'aria-describedby': params['aria-describedby'] });var use = this.getProps().use;var labelProps = { className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Select.styles.label()] = use !== 'link', _cx2[_Select.styles.placeholder(this.theme)] = params.isPlaceholder, _cx2[_Select.styles.customUsePlaceholder()] = params.isPlaceholder && use !== 'default', _cx2[_Select.styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx2)), style: { paddingRight: this.getSelectIconGap() } };var useIsCustom = use !== 'default';return /*#__PURE__*/_react.default.createElement(_Button.Button, buttonProps, /*#__PURE__*/_react.default.createElement("div", { className: _Select.styles.selectButtonContainer() }, this.props._icon && /*#__PURE__*/_react.default.createElement("div", { className: this.getLeftIconClass(this.props.size) }, this.props._icon), /*#__PURE__*/_react.default.createElement("span", labelProps, params.label), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Select.styles.arrowWrap(this.theme), (_cx3 = {}, _cx3[_Select.styles.arrowDisabled(this.theme)] = this.props.disabled, _cx3[_Select.styles.customUseArrow()] = useIsCustom, _cx3)) }, /*#__PURE__*/_react.default.createElement(_px.ArrowChevronDownIcon, null))));};_proto.getSelectIconGap = function getSelectIconGap() {var _this3 = this;var getArrowPadding = function getArrowPadding() {switch (_this3.props.size) {case 'large':return _this3.theme.selectIconGapLarge;case 'medium':return _this3.theme.selectIconGapMedium;case 'small':default:return _this3.theme.selectIconGapSmall;}};var arrowLeftPadding = parseFloat(getArrowPadding()) || 0;return arrowLeftPadding;};_proto.renderMenu = function renderMenu() {var search = this.props.search ? this.getSearch() : null;var value = this.getValue();var hasFixedWidth = !!this.props.menuWidth && this.props.menuWidth !== 'auto';return /*#__PURE__*/_react.default.createElement(_DropdownContainer.DropdownContainer, { getParent: this.dropdownContainerGetParent, offsetY: -1, align: this.props.menuAlign, disablePortal: this.props.disablePortal, hasFixedWidth: hasFixedWidth, menuPos: this.props.menuPos }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, { ref: this.refMenu, width: this.props.menuWidth, onItemClick: this.close, maxHeight: this.props.maxMenuHeight, align: this.props.menuAlign }, search, this.getMenuItems(value)));};_proto.renderMobileMenu = function renderMobileMenu() {var search = this.props.search ? this.getMobileSearch() : null;var value = this.getValue();return /*#__PURE__*/_react.default.createElement(_MobilePopup.MobilePopup, { headerChildComponent: search, caption: this.props.mobileMenuHeaderText, onCloseRequest: this.close, opened: this.state.opened }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, { hasShadow: false, onItemClick: this.close, disableScrollContainer: true, maxHeight: 'auto' }, this.getMenuItems(value)));};_proto.select = function select(value) {this.focus();this.setState({ opened: false, value: 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);}};_proto.getValue = function getValue() {if (this.props.value !== undefined) {return this.props.value;}return this.state.value;};_proto.mapItems = function mapItems(fn) {var items = this.props.items;if (!items) {return [];}var pattern = this.state.searchPattern && this.state.searchPattern.toLowerCase();var result = [];var index = 0;for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {var entry = _step.value;var _normalizeEntry = normalizeEntry(entry),_value = _normalizeEntry[0],_item = _normalizeEntry[1],_comment = _normalizeEntry[2];if (!pattern || this.getProps().filterItem(_value, _item, pattern)) {result.push(fn(_value, _item, index, _comment));++index;}}return result;};_proto.getItemByValue = function getItemByValue(value) {if (value === null || value === undefined) {return null;}var items = this.props.items || [];for (var _iterator2 = _createForOfIteratorHelperLoose(items), _step2; !(_step2 = _iterator2()).done;) {var entry = _step2.value;var _normalizeEntry2 = normalizeEntry(entry),itemValue = _normalizeEntry2[0],_item2 = _normalizeEntry2[1];if (this.areValuesEqual(itemValue, value)) {return _item2;}}return null;};_proto.areValuesEqual = function areValuesEqual(value1, value2) {return (0, _utils.isNonNullable)(value1) && (0, _utils.isNonNullable)(value2) && this.getProps().areValuesEqual(value1, value2);};return Select;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Select', _class2.defaultProps = { renderValue: renderValue, renderItem: renderItem, areValuesEqual: areValuesEqual, filterItem: filterItem, use: 'default' }, _class2.Item = _Item.Item, _class2.SEP = function () {return /*#__PURE__*/_react.default.createElement(_MenuSeparator.MenuSeparator, null);}, _class2.static = function (element) {(0, _invariant.default)( /*#__PURE__*/_react.default.isValidElement(element) || typeof element === 'function', 'Select.static(element) expects element to be a valid react element.');return element;}, _temp)) || _class) || _class) || _class);exports.Select = Select;
 function renderValue(value, item) {
   return item;
 }
@@ -578,23 +696,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 (_react.default.isValidElement(item) || (0, _utils.isFunction)(item) && _react.default.isValidElement(item = item())) {
-    item = (0, _reactGetTextContent.reactGetTextContent)(item);
+
+  if ((0, _utils.isFunction)(item)) {
+    return getTextFromItem(item());
+  }
+
+  if ( /*#__PURE__*/_react.default.isValidElement(item)) {
+    return (0, _reactGetTextContent.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;
 }