@skbkontur/react-ui 0.0.0-69a6fa606f → 0.0.0-6fbd9fadb2

package/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/components/Select/Select/Select.js

@@ -1,52 +1,14 @@
+import _createForOfIteratorHelperLoose from "@babel/runtime/helpers/esm/createForOfIteratorHelperLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 
 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;
-}
-
 import React from 'react';
-import PropTypes from 'prop-types';
 import invariant from 'invariant';
+import { globalObject } from '@skbkontur/global-object';
+import debounce from 'lodash.debounce';
 import { isKeyArrowDown, isKeyArrowUp, isKeyArrowVertical, isKeyEnter, isKeyEscape, isKeySpace } from "../../../lib/events/keyboard/identifiers";
 import { locale } from "../../../lib/locale/decorators";
 import { reactGetTextContent } from "../../../lib/reactGetTextContent";
@@ -59,17 +21,21 @@ import { MenuItem } from "../../MenuItem";
 import { MenuSeparator } from "../../MenuSeparator";
 import { RenderLayer } from "../../../internal/RenderLayer";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
-import { isFunction, isNonNullable, isReactUINode } from "../../../lib/utils";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { getRandomID, isFunction, isNonNullable, isReactUINode } from "../../../lib/utils";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { ArrowChevronDownIcon } from "../../../internal/icons/16px";
 import { MobilePopup } from "../../../internal/MobilePopup";
-import { cx } from "../../../lib/theming/Emotion";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { responsiveLayout } from "../../ResponsiveLayout/decorator";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
+import { ThemeConsumer, ThemeProvider } from "../../../lib/theming/ThemeContext";
+import { ArrowDownIcon } from "../ArrowDownIcon";
 import { Item } from "../Item";
 import { SelectLocaleHelper } from "../locale";
-import { styles } from "../Select.styles";
+import { getStyles } from "../Select.styles";
 import { getSelectTheme } from "../selectTheme";
 var PASS_BUTTON_PROPS = {
   disabled: true,
@@ -82,7 +48,12 @@ var PASS_BUTTON_PROPS = {
   onMouseOver: true
 };
 export var SelectDataTids = {
-  root: 'Select__root'
+  root: 'Select__root',
+  menu: 'Select__menu',
+  label: 'Select__label'
+};
+export var SelectIds = {
+  menu: SelectDataTids.menu
 };
 export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayout(_class = rootNode(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Select, _React$Component);
@@ -100,6 +71,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
       value: _this.props.defaultValue,
       searchPattern: ''
     };
+    _this.menuId = SelectIds.menu + getRandomID();
     _this.buttonElement = null;
     _this.getProps = createPropsGetter(Select.defaultProps);
 
@@ -144,26 +116,37 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
         label: label,
         isPlaceholder: isPlaceholder,
         onClick: _this.toggle,
-        onKeyDown: _this.handleKey
+        onKeyDown: _this.handleKey,
+        size: _this.getProps().size
       };
       return buttonParams;
     };
 
-    _this.getSearch = function (noMargin) {
-      var _cx;
-
+    _this.getSearch = function () {
+      var styles = getStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("div", {
-        className: cx((_cx = {}, _cx[styles.search()] = !noMargin, _cx))
+        className: styles.search(),
+        onKeyDown: _this.handleKey
       }, /*#__PURE__*/React.createElement(Input, {
-        value: _this.state.searchPattern,
-        ref: _this.focusInput,
+        ref: _this.debouncedFocusInput,
         onValueChange: _this.handleSearch,
         width: "100%"
       }));
     };
 
+    _this.getMobileSearch = function () {
+      return /*#__PURE__*/React.createElement(Input, {
+        autoFocus: true,
+        value: _this.state.searchPattern,
+        ref: _this.debouncedFocusInput,
+        onValueChange: _this.handleSearch,
+        width: "100%"
+      });
+    };
+
     _this.getMenuItems = function (value) {
       var isMobile = _this.isMobileLayout;
+      var size = _this.props.size;
       return _this.mapItems(function (iValue, item, i, comment) {
         if (isFunction(item)) {
           var element = item();
@@ -171,7 +154,8 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
           if ( /*#__PURE__*/React.isValidElement(element)) {
             return /*#__PURE__*/React.cloneElement(element, {
               key: i,
-              isMobile: isMobile
+              isMobile: isMobile,
+              size: size
             });
           }
 
@@ -182,7 +166,14 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
           if (isReactUINode('MenuItem', item)) {
             return /*#__PURE__*/React.cloneElement(item, {
               key: i,
-              isMobile: isMobile
+              isMobile: isMobile,
+              size: size
+            });
+          }
+
+          if (isReactUINode('MenuHeader', item)) {
+            return /*#__PURE__*/React.cloneElement(item, {
+              size: size
             });
           }
 
@@ -196,7 +187,8 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
           state: _this.areValuesEqual(iValue, value) ? 'selected' : null,
           onClick: _this.select.bind(_assertThisInitialized(_this), iValue),
           comment: comment,
-          isMobile: isMobile
+          isMobile: isMobile,
+          size: _this.props.size
         }, _this.getProps().renderItem(iValue, item));
       });
     };
@@ -206,12 +198,11 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
     };
 
     _this.focusInput = function (input) {
-      // fix cases when an Input is rendered in portal
-      setTimeout(function () {
-        return input == null ? void 0 : input.focus();
-      }, 0);
+      return input == null ? void 0 : input.focus();
     };
 
+    _this.debouncedFocusInput = debounce(_this.focusInput);
+
     _this.refMenu = function (menu) {
       _this.menu = menu;
     };
@@ -277,11 +268,13 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
     _this.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(1);
+      (_this$menu = _this.menu) == null ? void 0 : _this$menu.highlightItem(menuItemsAtAnyLevel ? 0 : 1);
     };
 
     _this.buttonRef = function (element) {
@@ -289,12 +282,19 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
     };
 
     _this.getButton = function (buttonParams) {
+      var _buttonElement$props$;
+
       var button = _this.props._renderButton ? _this.props._renderButton(buttonParams) : _this.renderDefaultButton(buttonParams);
       var buttonElement = React.Children.only(button);
       return /*#__PURE__*/React.isValidElement(buttonElement) ? /*#__PURE__*/React.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;
     };
 
@@ -305,22 +305,30 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
 
   _proto.componentDidUpdate = function componentDidUpdate(_prevProps, prevState) {
     if (!prevState.opened && this.state.opened) {
-      window.addEventListener('popstate', this.close);
+      globalObject.addEventListener == null ? void 0 : globalObject.addEventListener('popstate', this.close);
     }
 
     if (prevState.opened && !this.state.opened) {
-      window.removeEventListener('popstate', this.close);
+      globalObject.removeEventListener == null ? void 0 : globalObject.removeEventListener('popstate', this.close);
     }
   };
 
   _proto.render = function render() {
     var _this2 = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-        value: getSelectTheme(theme, _this2.props)
-      }, _this2.renderMain());
+    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
+      _this2.featureFlags = getFullReactUIFlagsContext(flags);
+      return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+        _this2.emotion = emotion;
+        return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {
+          _this2.theme = ThemeFactory.create({
+            menuOffsetY: theme.selectMenuOffsetY
+          }, theme);
+          return /*#__PURE__*/React.createElement(ThemeProvider, {
+            value: _this2.theme
+          }, _this2.renderMain());
+        });
+      });
     });
   }
   /**
@@ -345,18 +353,21 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   };
 
   _proto.renderMain = function renderMain() {
-    var _cx2;
+    var _this$emotion$cx;
 
     var buttonParams = this.getDefaultButtonParams();
-    var button = this.getButton(buttonParams);
+    var button = /*#__PURE__*/React.createElement(ThemeProvider, {
+      value: getSelectTheme(this.theme, this.props)
+    }, this.getButton(buttonParams));
     var isMobile = this.isMobileLayout;
     var style = {
       width: this.props.width,
       maxWidth: this.props.maxWidth || undefined
     };
+    var styles = getStyles(this.emotion);
     var root = /*#__PURE__*/React.createElement("span", {
       "data-tid": SelectDataTids.root,
-      className: cx((_cx2 = {}, _cx2[styles.root()] = true, _cx2[styles.rootMobile(this.theme)] = isMobile, _cx2)),
+      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.createElement(CommonWrapper, _extends({
@@ -388,7 +399,9 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   };
 
   _proto.getLeftIconClass = function getLeftIconClass(size) {
-    if (this.props.use === 'link') {
+    var styles = getStyles(this.emotion);
+
+    if (this.getProps().use === 'link') {
       return styles.leftIconLink(this.theme);
     }
 
@@ -406,7 +419,7 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   };
 
   _proto.renderDefaultButton = function renderDefaultButton(params) {
-    var _cx3, _cx4;
+    var _this$emotion$cx2, _this$emotion$cx3;
 
     var buttonProps = _extends({}, filterProps(this.props, PASS_BUTTON_PROPS), {
       align: 'left',
@@ -414,23 +427,30 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
       width: '100%',
       onClick: params.onClick,
       onKeyDown: params.onKeyDown,
-      active: params.opened
+      active: params.opened,
+      size: params.size
     });
 
+    var use = this.getProps().use;
+    var styles = getStyles(this.emotion);
     var labelProps = {
-      className: cx((_cx3 = {}, _cx3[styles.label()] = this.props.use !== 'link', _cx3[styles.placeholder(this.theme)] = params.isPlaceholder, _cx3[styles.customUsePlaceholder()] = params.isPlaceholder && this.props.use !== 'default', _cx3[styles.placeholderDisabled(this.theme)] = params.isPlaceholder && this.props.disabled, _cx3)),
+      '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 = this.props.use !== 'default';
+    var useIsCustom = use !== 'default';
+    var icon = isTheme2022(this.theme) ? /*#__PURE__*/React.createElement(ArrowDownIcon, {
+      size: this.props.size
+    }) : /*#__PURE__*/React.createElement(ArrowChevronDownIcon, null);
     return /*#__PURE__*/React.createElement(Button, buttonProps, /*#__PURE__*/React.createElement("div", {
       className: styles.selectButtonContainer()
     }, this.props._icon && /*#__PURE__*/React.createElement("div", {
       className: this.getLeftIconClass(this.props.size)
     }, this.props._icon), /*#__PURE__*/React.createElement("span", labelProps, params.label), /*#__PURE__*/React.createElement("div", {
-      className: cx(styles.arrowWrap(this.theme), (_cx4 = {}, _cx4[styles.arrowDisabled(this.theme)] = this.props.disabled, _cx4[styles.customUseArrow()] = useIsCustom, _cx4))
-    }, /*#__PURE__*/React.createElement(ArrowChevronDownIcon, null))));
+      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() {
@@ -455,22 +475,17 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   };
 
   _proto.renderMenu = function renderMenu() {
-    var search = this.props.search ? /*#__PURE__*/React.createElement("div", {
-      className: styles.search(),
-      onKeyDown: this.handleKey
-    }, /*#__PURE__*/React.createElement(Input, {
-      ref: this.focusInput,
-      onValueChange: this.handleSearch,
-      width: "100%"
-    })) : null;
+    var search = this.props.search ? this.getSearch() : null;
     var value = this.getValue();
     var hasFixedWidth = !!this.props.menuWidth && this.props.menuWidth !== 'auto';
     return /*#__PURE__*/React.createElement(DropdownContainer, {
+      id: this.menuId,
+      "data-tid": SelectDataTids.menu,
       getParent: this.dropdownContainerGetParent,
-      offsetY: -1,
       align: this.props.menuAlign,
       disablePortal: this.props.disablePortal,
-      hasFixedWidth: hasFixedWidth
+      hasFixedWidth: hasFixedWidth,
+      menuPos: this.props.menuPos
     }, /*#__PURE__*/React.createElement(Menu, {
       ref: this.refMenu,
       width: this.props.menuWidth,
@@ -481,13 +496,11 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   };
 
   _proto.renderMobileMenu = function renderMobileMenu() {
-    var search = this.props.search ? this.getSearch(true) : null;
+    var search = this.props.search ? this.getMobileSearch() : null;
     var value = this.getValue();
-    var isWithSearch = Boolean(search);
     return /*#__PURE__*/React.createElement(MobilePopup, {
       headerChildComponent: search,
       caption: this.props.mobileMenuHeaderText,
-      useFullHeight: isWithSearch,
       onCloseRequest: this.close,
       opened: this.state.opened
     }, /*#__PURE__*/React.createElement(Menu, {
@@ -575,33 +588,13 @@ export var Select = (_dec = locale('Select', SelectLocaleHelper), responsiveLayo
   };
 
   return Select;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Select', _class2.propTypes = {
-  areValuesEqual: PropTypes.func,
-  defaultValue: PropTypes.any,
-  disablePortal: PropTypes.bool,
-  disabled: PropTypes.bool,
-  error: PropTypes.bool,
-  filterItem: PropTypes.func,
-  items: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-  maxMenuHeight: PropTypes.number,
-  maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  placeholder: PropTypes.node,
-  renderItem: PropTypes.func,
-  renderValue: PropTypes.func,
-  search: PropTypes.bool,
-  value: PropTypes.any,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  onValueChange: PropTypes.func,
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  onKeyDown: PropTypes.func
-}, _class2.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Select', _class2.displayName = 'Select', _class2.defaultProps = {
   renderValue: renderValue,
   renderItem: renderItem,
   areValuesEqual: areValuesEqual,
   filterItem: filterItem,
-  use: 'default'
+  use: 'default',
+  size: 'small'
 }, _class2.Item = Item, _class2.SEP = function () {
   return /*#__PURE__*/React.createElement(MenuSeparator, null);
 }, _class2["static"] = function (element) {