@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-ea6161656e

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

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

package/cjs/components/Select/Item.js

@@ -1,10 +1,15 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Item = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.Item = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 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.
 
 
+
   render = function render() {
-    return _react.default.createElement(_MenuItem.MenuItem, null, this.props.children);
-  };return Item;}(_react.default.Component);exports.Item = Item;Item.__KONTUR_REACT_UI__ = 'SelectItem';
+    return /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, { isNotSelectable: this.props.isNotSelectable }, this.props.children);
+  };return Item;}(_react.default.Component);exports.Item = Item;Item.__KONTUR_REACT_UI__ = 'SelectItem';Item.displayName = 'SelectItem';

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,WAAO,6BAAC,kBAAD,QAAW,KAAKC,KAAL,CAAWC,QAAtB,CAAP;AACD,G,eALuBC,eAAMC,S,sBAAnBL,I,CACGM,mB,GAAsB,Y","sourcesContent":["import React from 'react';\r\n\r\nimport { MenuItem } from '../MenuItem';\r\n\r\nexport class Item extends React.Component<{ children?: React.ReactNode }> {\r\n  public static __KONTUR_REACT_UI__ = 'SelectItem';\r\n\r\n  public render() {\r\n    return <MenuItem>{this.props.children}</MenuItem>;\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["Item.tsx"],"names":["Item","render","props","isNotSelectable","children","React","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"wPAAA;;AAEA,uC;;;;;;AAMaA,I;;;;AAIJC,EAAAA,M,GAAP,kBAAgB;AACd,wBAAO,6BAAC,kBAAD,IAAU,eAAe,EAAE,KAAKC,KAAL,CAAWC,eAAtC,IAAwD,KAAKD,KAAL,CAAWE,QAAnE,CAAP;AACD,G,eANuBC,eAAMC,S,sBAAnBN,I,CACGO,mB,GAAsB,Y,CADzBP,I,CAEGQ,W,GAAc,Y","sourcesContent":["import React from 'react';\n\nimport { MenuItem } from '../MenuItem';\n\ninterface ItemProps {\n  children?: React.ReactNode;\n  isNotSelectable?: boolean;\n}\nexport class Item extends React.Component<ItemProps> {\n  public static __KONTUR_REACT_UI__ = 'SelectItem';\n  public static displayName = 'SelectItem';\n\n  public render() {\n    return <MenuItem isNotSelectable={this.props.isNotSelectable}>{this.props.children}</MenuItem>;\n  }\n}\n"]}

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

@@ -1,31 +1,41 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ButtonSize, ButtonUse } from '../Button';
+import React, { AriaAttributes, ReactNode, ReactPortal } from 'react';
+import { ButtonUse } from '../Button';
+import { DropdownContainerProps } from '../../internal/DropdownContainer';
 import { Nullable } from '../../typings/utility-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
 import { Item } from './Item';
-export interface ButtonParams {
+export interface ButtonParams extends Pick<AriaAttributes, 'aria-describedby' | 'aria-controls' | 'aria-label' | 'aria-expanded'> {
     disabled?: boolean;
     label: React.ReactNode;
     onClick: () => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
     opened: boolean;
     isPlaceholder: boolean;
+    size: SizeProp;
 }
-export interface SelectProps<TValue, TItem> {
+export declare const SelectDataTids: {
+    readonly root: "Select__root";
+    readonly menu: "Select__menu";
+    readonly label: "Select__label";
+};
+export declare const SelectIds: {
+    readonly menu: "Select__menu";
+};
+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'>, Pick<AriaAttributes, 'aria-describedby' | 'aria-label'> {
     /** @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 +63,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 +95,43 @@ export interface SelectProps<TValue, TItem> {
     search?: boolean;
     value?: TValue;
     width?: number | string;
+    /**
+     * Состояние валидации при предупреждении.
+     */
     warning?: boolean;
     use?: ButtonUse;
-    size?: ButtonSize;
+    size?: SizeProp;
     onFocus?: React.FocusEventHandler<HTMLElement>;
     onBlur?: React.FocusEventHandler<HTMLElement>;
+    /**
+     * Текст заголовка выпадающего меню в мобильной версии
+     */
+    mobileMenuHeaderText?: string;
 }
 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' | 'size'>>;
 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 displayName: 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 emotion;
+    private isMobileLayout;
     private readonly locale;
     private menu;
+    private menuId;
     private buttonElement;
     private getProps;
+    private setRootNode;
+    private featureFlags;
     componentDidUpdate(_prevProps: SelectProps<TValue, TItem>, prevState: SelectState<TValue>): void;
     render(): JSX.Element;
     /**
@@ -150,15 +146,21 @@ 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 getLabelPaddingRight;
-    private getLegacyArrowShift;
-    private renderLinkButton;
+    private getSelectIconGap;
     private renderMenu;
+    private getSearch;
+    private renderMobileMenu;
+    private getMobileSearch;
+    private getMenuItems;
     private dropdownContainerGetParent;
     private focusInput;
+    private debouncedFocusInput;
     private refMenu;
     private toggle;
     private handleKey;
@@ -167,11 +169,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,8 @@
-"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").default;exports.__esModule = true;exports.SelectIds = exports.SelectDataTids = exports.Select = void 0;var _createForOfIteratorHelperLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelperLoose"));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 _globalObject = require("@skbkontur/global-object");
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+
 
 var _identifiers = require("../../lib/events/keyboard/identifiers");
 
@@ -19,7 +18,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");
@@ -27,9 +25,25 @@ var _RenderLayer = require("../../internal/RenderLayer");
 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 _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+
+
+var _featureFlagsContext = require("../../lib/featureFlagsContext");
+
+
 
 
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+var _ArrowDownIcon = require("./ArrowDownIcon");
 var _Item = require("./Item");
 var _locale = require("./locale");
 var _Select = require("./Select.styles");
@@ -44,6 +58,8 @@ var _selectTheme = require("./selectTheme");var _dec, _class, _class2, _temp;
 
 
 
+
+
 var PASS_BUTTON_PROPS = {
   disabled: true,
   error: true,
@@ -53,9 +69,17 @@ var PASS_BUTTON_PROPS = {
 
   onMouseEnter: true,
   onMouseLeave: true,
-  onMouseOver: true };var
+  onMouseOver: true };
+
+
+var SelectDataTids = {
+  root: 'Select__root',
+  menu: 'Select__menu',
+  label: 'Select__label' };exports.SelectDataTids = SelectDataTids;
 
 
+var SelectIds = {
+  menu: SelectDataTids.menu };exports.SelectIds = SelectIds;var
 
 
 
@@ -148,7 +172,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.
 
 
 
@@ -174,6 +197,9 @@ 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.
+
+
 
 
 
@@ -197,12 +223,16 @@ 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.
+
+    menuId = SelectIds.menu + (0, _utils.getRandomID)();_this.
     buttonElement = null;_this.
     getProps = (0, _createPropsGetter.createPropsGetter)(Select.defaultProps);_this.
 
@@ -225,6 +255,25 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -246,7 +295,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();
@@ -319,8 +368,21 @@ 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,
+        size: _this.getProps().size };
 
 
+      return buttonParams;
+    };_this.
 
 
 
@@ -454,21 +516,96 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
 
 
 
+    getSearch = function () {
+      var styles = (0, _Select.getStyles)(_this.emotion);
+      return /*#__PURE__*/(
+        _react.default.createElement("div", { className: styles.search(), onKeyDown: _this.handleKey }, /*#__PURE__*/
+        _react.default.createElement(_Input.Input, { ref: _this.debouncedFocusInput, onValueChange: _this.handleSearch, width: "100%" })));
 
 
+    };_this.
 
 
 
 
-    dropdownContainerGetParent = function () {
-      return _reactDom.default.findDOMNode((0, _assertThisInitialized2.default)(_this));
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    getMobileSearch = function () {
+      return /*#__PURE__*/(
+        _react.default.createElement(_Input.Input, {
+          autoFocus: true,
+          value: _this.state.searchPattern,
+          ref: _this.debouncedFocusInput,
+          onValueChange: _this.handleSearch,
+          width: "100%" }));
+
+
     };_this.
 
-    focusInput = function (input) {
-      // fix cases when an Input is rendered in portal
-      setTimeout(function () {return input == null ? void 0 : input.focus();}, 0);
+    getMenuItems = function (value) {
+      var isMobile = _this.isMobileLayout;
+      var size = _this.props.size;
+
+      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, size: size });
+          }
+
+          return null;
+        }
+
+        if ( /*#__PURE__*/_react.default.isValidElement(item)) {
+          if ((0, _utils.isReactUINode)('MenuItem', item)) {
+            return /*#__PURE__*/_react.default.cloneElement(item, { key: i, isMobile: isMobile, size: size });
+          }
+          if ((0, _utils.isReactUINode)('MenuHeader', item)) {
+            return /*#__PURE__*/_react.default.cloneElement(item, { size: size });
+          }
+          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,
+            size: _this.props.size },
+
+          _this.getProps().renderItem(iValue, item)));
+
+
+      });
+
+    };_this.
+
+    dropdownContainerGetParent = function () {
+      return (0, _rootNode.getRootNode)((0, _assertThisInitialized2.default)(_this));
     };_this.
 
+
+
+    focusInput = function (input) {return input == null ? void 0 : input.focus();};_this.
+    debouncedFocusInput = (0, _lodash.default)(_this.focusInput);_this.
+
     refMenu = function (menu) {
       _this.menu = menu;
     };_this.
@@ -518,8 +655,11 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
       }
     };_this.
 
-    handleSearch = function (value) {
+    handleSearch = function (value) {var _this$menu;
+      var menuItemsAtAnyLevel = _this.featureFlags.menuItemsAtAnyLevel;
+
       _this.setState({ searchPattern: value });
+      (_this$menu = _this.menu) == null ? void 0 : _this$menu.highlightItem(menuItemsAtAnyLevel ? 0 : 1);
     };_this.
 
 
@@ -571,6 +711,10 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
 
 
 
+
+
+
+
 
 
 
@@ -580,23 +724,28 @@ Select = (_dec = (0, _decorators.locale)('Select', _locale.SelectLocaleHelper),
       _this.buttonElement = element;
     };_this.
 
-    getButton = function (buttonParams) {
+    getButton = function (buttonParams) {var _buttonElement$props$;
       var button = _this.props._renderButton ?
       _this.props._renderButton(buttonParams) :
       _this.renderDefaultButton(buttonParams);
 
       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 }) :
+        onBlur: _this.props.onBlur,
+        size: _this.props.size,
+        'aria-describedby': _this.props['aria-describedby'],
+        'aria-expanded': _this.state.opened ? 'true' : 'false',
+        'aria-controls': _this.menuId,
+        'aria-label': (_buttonElement$props$ = buttonElement.props['aria-label']) != null ? _buttonElement$props$ : _this.props['aria-label'] }) :
 
       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 _react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _selectTheme.getSelectTheme)(theme, _this2.props) }, _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, width: '100%', onClick: params.onClick, onKeyDown: params.onKeyDown, active: params.opened });if (this.props._icon) {Object.assign(buttonProps, { icon: this.props._icon, _noRightPadding: true });}var labelProps = { className: (0, _classnames.default)((_cn = {}, _cn[_Select.jsStyles.label()] = this.props.use !== 'link', _cn[_Select.jsStyles.placeholder(this.theme)] = params.isPlaceholder, _cn[_Select.jsStyles.customUsePlaceholder()] = params.isPlaceholder && this.props.use !== 'default', _cn)), style: { paddingRight: this.getLabelPaddingRight() } };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(), style: { right: this.getLegacyArrowShift() } }, _react.default.createElement("div", { className: (0, _classnames.default)(_Select.jsStyles.arrow(this.theme), useIsCustom && _Select.jsStyles.customUseArrow()) })));};_proto.getLabelPaddingRight = function getLabelPaddingRight() {var _this3 = this;var getArrowPadding = function getArrowPadding() {switch (_this3.props.size) {case 'large':return _this3.theme.selectPaddingArrowLarge;case 'medium':return _this3.theme.selectPaddingArrowMedium;case 'small':default:return _this3.theme.selectPaddingArrowSmall;}};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);};_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 _this5 = 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: _this5.getProps().areValuesEqual(iValue, value) ? 'selected' : null, onClick: _this5.select.bind(_this5, iValue), comment: comment }, _this5.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) {_globalObject.globalObject.addEventListener == null ? void 0 : _globalObject.globalObject.addEventListener('popstate', this.close);}if (prevState.opened && !this.state.opened) {_globalObject.globalObject.removeEventListener == null ? void 0 : _globalObject.globalObject.removeEventListener('popstate', this.close);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;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 _this$emotion$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 styles = (0, _Select.getStyles)(this.emotion);var root = /*#__PURE__*/_react.default.createElement("span", { "data-tid": SelectDataTids.root, className: this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.root()] = true, _this$emotion$cx[styles.rootMobile(this.theme)] = isMobile, _this$emotion$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) {var styles = (0, _Select.getStyles)(this.emotion);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 _this$emotion$cx2, _this$emotion$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, size: params.size });var use = this.getProps().use;var styles = (0, _Select.getStyles)(this.emotion);var labelProps = { 'data-tid': SelectDataTids.label, className: this.emotion.cx((_this$emotion$cx2 = {}, _this$emotion$cx2[styles.label()] = use !== 'link', _this$emotion$cx2[styles.placeholder(this.theme)] = params.isPlaceholder, _this$emotion$cx2[styles.customUsePlaceholder()] = params.isPlaceholder && use !== 'default', _this$emotion$cx2[styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _this$emotion$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: 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: this.emotion.cx(styles.arrowWrap(this.theme), (_this$emotion$cx3 = {}, _this$emotion$cx3[styles.arrowDisabled(this.theme)] = this.props.disabled, _this$emotion$cx3[styles.customUseArrow()] = useIsCustom, _this$emotion$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, { id: this.menuId, "data-tid": SelectDataTids.menu, 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 = (0, _createForOfIteratorHelperLoose2.default)(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 = (0, _createForOfIteratorHelperLoose2.default)(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.displayName = 'Select', _class2.defaultProps = { renderValue: renderValue, renderItem: renderItem, areValuesEqual: areValuesEqual, filterItem: filterItem, use: 'default', size: 'small' }, _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;
 }
@@ -612,23 +761,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;
 }