@skbkontur/react-ui 0.0.0-ecefada396 → 0.0.0-ee57da3e1e

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

@@ -1,7 +1,9 @@
 import React from 'react';
-export declare class Item extends React.Component<{
+interface ItemProps {
     children?: React.ReactNode;
-}> {
+}
+export declare class Item extends React.Component<ItemProps> {
     static __KONTUR_REACT_UI__: string;
     render(): JSX.Element;
 }
+export {};

package/cjs/components/Select/Item.js

@@ -2,6 +2,9 @@
 
 var _MenuItem = require("../MenuItem");var
 
+
+
+
 Item = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Item, _React$Component);function Item() {return _React$Component.apply(this, arguments) || this;}var _proto = Item.prototype;_proto.
 
 

package/cjs/components/Select/Item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Item.tsx"],"names":["Item","render","props","children","React","Component","__KONTUR_REACT_UI__"],"mappings":"gPAAA;;AAEA,uC;;AAEaA,I;;;AAGJC,EAAAA,M,GAAP,kBAAgB;AACd,wBAAO,6BAAC,kBAAD,QAAW,KAAKC,KAAL,CAAWC,QAAtB,CAAP;AACD,G,eALuBC,eAAMC,S,sBAAnBL,I,CACGM,mB,GAAsB,Y","sourcesContent":["import React from 'react';\n\nimport { MenuItem } from '../MenuItem';\n\nexport class Item extends React.Component<{ children?: React.ReactNode }> {\n  public static __KONTUR_REACT_UI__ = 'SelectItem';\n\n  public render() {\n    return <MenuItem>{this.props.children}</MenuItem>;\n  }\n}\n"]}
+{"version":3,"sources":["Item.tsx"],"names":["Item","render","props","children","React","Component","__KONTUR_REACT_UI__"],"mappings":"gPAAA;;AAEA,uC;;;;;AAKaA,I;;;AAGJC,EAAAA,M,GAAP,kBAAgB;AACd,wBAAO,6BAAC,kBAAD,QAAW,KAAKC,KAAL,CAAWC,QAAtB,CAAP;AACD,G,eALuBC,eAAMC,S,sBAAnBL,I,CACGM,mB,GAAsB,Y","sourcesContent":["import React from 'react';\n\nimport { MenuItem } from '../MenuItem';\n\ninterface ItemProps {\n  children?: React.ReactNode;\n}\nexport class Item extends React.Component<ItemProps> {\n  public static __KONTUR_REACT_UI__ = 'SelectItem';\n\n  public render() {\n    return <MenuItem>{this.props.children}</MenuItem>;\n  }\n}\n"]}

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

@@ -1,6 +1,6 @@
-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';
@@ -11,8 +11,13 @@ export interface ButtonParams {
     onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
     opened: boolean;
     isPlaceholder: boolean;
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
 }
-export interface SelectProps<TValue, TItem> extends CommonProps {
+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.ReactNode;
     /** @ignore */
@@ -24,7 +29,7 @@ export interface SelectProps<TValue, TItem> extends CommonProps {
     disablePortal?: boolean;
     disabled?: boolean;
     /**
-     * Cостояние валидации при ошибке.
+     * Состояние валидации при ошибке.
      */
     error?: boolean;
     filterItem?: (value: TValue, item: TItem, pattern: string) => boolean;
@@ -52,7 +57,7 @@ export interface SelectProps<TValue, TItem> extends CommonProps {
      * <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,7 +90,7 @@ export interface SelectProps<TValue, TItem> extends CommonProps {
     value?: TValue;
     width?: number | string;
     /**
-     * Cостояние валидации при предупреждении.
+     * Состояние валидации при предупреждении.
      */
     warning?: boolean;
     use?: ButtonUse;
@@ -93,46 +98,23 @@ export interface SelectProps<TValue, TItem> extends CommonProps {
     onFocus?: React.FocusEventHandler<HTMLElement>;
     onBlur?: React.FocusEventHandler<HTMLElement>;
     /**
-     * Текст заголовка выпдающего меню в мобильной версии
+     * Текст заголовка выпадающего меню в мобильной версии
      */
     mobileMenuHeaderText?: string;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
 }
 export interface SelectState<TValue> {
     opened: boolean;
     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 | (() => React.ReactElement)) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | (() => React.ReactElement);
@@ -143,6 +125,7 @@ export declare class Select<TValue = {}, TItem = {}> extends React.Component<Sel
     private menu;
     private buttonElement;
     private getProps;
+    private setRootNode;
     componentDidUpdate(_prevProps: SelectProps<TValue, TItem>, prevState: SelectState<TValue>): void;
     render(): JSX.Element;
     /**
@@ -165,8 +148,9 @@ export declare class Select<TValue = {}, TItem = {}> extends React.Component<Sel
     private renderDefaultButton;
     private getSelectIconGap;
     private renderMenu;
-    private renderMobileMenu;
     private getSearch;
+    private renderMobileMenu;
+    private getMobileSearch;
     private getMenuItems;
     private dropdownContainerGetParent;
     private focusInput;
@@ -178,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,6 +1,4 @@
-"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 _identifiers = require("../../lib/events/keyboard/identifiers");
@@ -30,12 +28,17 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 var _px = require("../../internal/icons/16px");
 var _MobilePopup = require("../../internal/MobilePopup");
 var _Emotion = require("../../lib/theming/Emotion");
-var _ResponsiveLayout = require("../ResponsiveLayout");
+var _decorator = require("../ResponsiveLayout/decorator");
+var _rootNode = require("../../lib/rootNode");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
 
+var _ArrowDownIcon = require("./ArrowDownIcon");
 var _Item = require("./Item");
 var _locale = require("./locale");
 var _Select = require("./Select.styles");
-var _selectTheme = require("./selectTheme");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++] };};}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}it = o[Symbol.iterator]();return it.next.bind(it);}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;}
+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;}
+
 
 
 
@@ -55,11 +58,11 @@ var PASS_BUTTON_PROPS = {
 
   onMouseEnter: true,
   onMouseLeave: true,
-  onMouseOver: true };var
-
-
+  onMouseOver: true };
 
 
+var SelectDataTids = {
+  root: 'Select__root' };exports.SelectDataTids = SelectDataTids;var
 
 
 
@@ -156,8 +159,6 @@ var PASS_BUTTON_PROPS = {
 
 
 
-Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper), (0, _ResponsiveLayout.responsiveLayout)(_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.
-
 
 
 
@@ -180,6 +181,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.
 
 
 
@@ -207,10 +209,10 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
       searchPattern: '' };_this.
 
 
-    theme = void 0;_this.
-    isMobileLayout = void 0;_this.
-    locale = void 0;_this.
-    menu = void 0;_this.
+
+
+
+
     buttonElement = null;_this.
     getProps = (0, _createPropsGetter.createPropsGetter)(Select.defaultProps);_this.
 
@@ -234,6 +236,10 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
 
 
 
+
+
+
+
 
 
 
@@ -318,15 +324,24 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
 
 
 
-    getDefaultButtonParams = function () {var _this$renderLabel =
-      _this.renderLabel(),label = _this$renderLabel.label,isPlaceholder = _this$renderLabel.isPlaceholder;
+
+
+
+
+
+
+
+
+    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 };
+        onKeyDown: _this.handleKey,
+        'aria-describedby': _this.props['aria-describedby'] };
 
 
       return buttonParams;
@@ -457,6 +472,14 @@ 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.
 
 
 
@@ -476,10 +499,14 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
 
 
 
-    getSearch = function (noMargin) {var _cx;
+    getMobileSearch = function () {
       return /*#__PURE__*/(
-        _react.default.createElement("div", { className: (0, _Emotion.cx)((_cx = {}, _cx[_Select.styles.search()] = noMargin ? false : true, _cx)) }, /*#__PURE__*/
-        _react.default.createElement(_Input.Input, { value: _this.state.searchPattern, ref: _this.focusInput, onValueChange: _this.handleSearch, width: "100%" })));
+        _react.default.createElement(_Input.Input, {
+          autoFocus: true,
+          value: _this.state.searchPattern,
+          ref: _this.focusInput,
+          onValueChange: _this.handleSearch,
+          width: "100%" }));
 
 
     };_this.
@@ -509,7 +536,7 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
         return /*#__PURE__*/(
           _react.default.createElement(_MenuItem.MenuItem, {
             key: i,
-            state: _this.getProps().areValuesEqual(iValue, value) ? 'selected' : null,
+            state: _this.areValuesEqual(iValue, value) ? 'selected' : null,
             onClick: _this.select.bind((0, _assertThisInitialized2.default)(_this), iValue),
             comment: comment,
             isMobile: isMobile },
@@ -522,7 +549,7 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
     };_this.
 
     dropdownContainerGetParent = function () {
-      return _reactDom.default.findDOMNode((0, _assertThisInitialized2.default)(_this));
+      return (0, _rootNode.getRootNode)((0, _assertThisInitialized2.default)(_this));
     };_this.
 
     focusInput = function (input) {
@@ -633,6 +660,10 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
 
 
 
+
+
+
+
 
 
 
@@ -656,9 +687,9 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
         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 /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _selectTheme.getSelectTheme)(theme, _this2.props) }, _this2.renderMain());});} /**
+    };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 = _ThemeFactory.ThemeFactory.create({ menuOffsetY: theme.selectMenuOffsetY }, 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 _cx2;var buttonParams = this.getDefaultButtonParams();var button = 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", { className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Select.styles.root()] = true, _cx2[_Select.styles.rootMobile(this.theme)] = isMobile, _cx2)), style: style }, button, this.getMenuRenderer());return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, 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 (item != null || value != null) {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.props.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 _cx3, _cx4;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 });var labelProps = { className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_Select.styles.label()] = this.props.use !== 'link', _cx3[_Select.styles.placeholder(this.theme)] = params.isPlaceholder, _cx3[_Select.styles.customUsePlaceholder()] = params.isPlaceholder && this.props.use !== 'default', _cx3[_Select.styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx3)), style: { paddingRight: this.getSelectIconGap() } };var useIsCustom = this.props.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), (_cx4 = {}, _cx4[_Select.styles.arrowDisabled(this.theme)] = this.props.disabled, _cx4[_Select.styles.customUseArrow()] = useIsCustom, _cx4)) }, /*#__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 ? /*#__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%" })) : null;var value = this.getValue();return /*#__PURE__*/_react.default.createElement(_DropdownContainer.DropdownContainer, { getParent: this.dropdownContainerGetParent, offsetY: -1, align: this.props.menuAlign, disablePortal: this.props.disablePortal }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, { ref: this.refMenu, width: this.props.menuWidth, onItemClick: this.close, maxHeight: this.props.maxMenuHeight }, search, this.getMenuItems(value)));};_proto.renderMobileMenu = function renderMobileMenu() {var search = this.props.search ? this.getSearch(true) : null;var value = this.getValue();var isWithSearch = Boolean(search);return /*#__PURE__*/_react.default.createElement(_MobilePopup.MobilePopup, { headerChildComponent: search, caption: this.props.mobileMenuHeaderText, useFullHeight: isWithSearch, 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.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 = _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.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 /*#__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);exports.Select = Select;
+   */;_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';var icon = (0, _ThemeHelpers.isTheme2022)(this.theme) ? /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, { size: this.props.size }) : /*#__PURE__*/_react.default.createElement(_px.ArrowChevronDownIcon, null);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)) }, icon)));};_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, 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;
 }
@@ -674,23 +705,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 ( /*#__PURE__*/_react.default.isValidElement(item) || (0, _utils.isFunction)(item) && /*#__PURE__*/_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);
   }
-  if (typeof item !== 'string') {
+
+  return '';
+};
+
+function filterItem(value, item, pattern) {
+  if (item === Select.SEP) {
     return false;
   }
-  return item.toLowerCase().indexOf(pattern) !== -1;
+
+  var itemText = getTextFromItem(item);
+
+  if (!itemText) {
+    return false;
+  }
+
+  return itemText.toLowerCase().indexOf(pattern) !== -1;
 }