@skbkontur/react-ui 5.4.7-225d1.0 → 5.4.7-7ccf0.0

package/components/TokenInput/TokenInput/TokenInput.js

@@ -6,7 +6,7 @@ var _dec, _class, _TokenInput;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import lodashIsEqual from 'lodash.isequal';
-import { globalObject } from '@skbkontur/global-object';
+import logWarning from 'warning';
 import { PopupIds } from "../../../internal/Popup";
 import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, isKeyArrowVertical, isKeyBackspace, isKeyComma, isKeyDelete, isKeyEnter, isKeyEscape, isShortcutSelectAll } from "../../../lib/events/keyboard/identifiers";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
@@ -16,16 +16,16 @@ import { emptyHandler, getRandomID } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { locale } from "../../../lib/locale/decorators";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { getUid } from "../../../lib/uidUtils";
 import { TokenView } from "../../Token/TokenView";
-import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
 import { withSize } from "../../../lib/size/SizeDecorator";
+import { withRenderEnvironment } from "../../../lib/renderEnvironment";
 import { blink as _blink } from "../../../lib/blink";
+import { ScrollContainer } from "../../ScrollContainer";
 import { TokenInputLocaleHelper } from "../locale";
-import { styles } from "../TokenInput.styles";
+import { getStyles } from "../TokenInput.styles";
 import { tokenInputReducer } from "../TokenInputReducer";
 import { TokenInputMenu } from "../TokenInputMenu";
 import { TextWidthHelper } from "../TextWidthHelper";
@@ -60,7 +60,7 @@ var defaultToKey = function defaultToKey(item) {
 var identity = function identity(item) {
   return item;
 };
-var defaultRenderToken = function defaultRenderToken(item, _ref) {
+var defaultRenderToken = function defaultRenderToken(item, _ref, index) {
   var isActive = _ref.isActive,
     onClick = _ref.onClick,
     onDoubleClick = _ref.onDoubleClick,
@@ -86,7 +86,7 @@ var defaultRenderToken = function defaultRenderToken(item, _ref) {
  *
  * Поле с токенами используют для выбора нескольких значений из справочника и для добавления своих значений.
  */
-export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), rootNode(_class = _dec(_class = withSize(_class = (_TokenInput = /*#__PURE__*/function (_React$PureComponent) {
+export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), withRenderEnvironment(_class = rootNode(_class = _dec(_class = withSize(_class = (_TokenInput = /*#__PURE__*/function (_React$PureComponent) {
   function TokenInput() {
     var _this;
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -100,6 +100,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     _this.tokensInputMenu = null;
     _this.textHelper = null;
     _this.wrapper = null;
+    _this.scrollContainerRef = /*#__PURE__*/React.createRef();
     _this.memoizedTokens = new Map();
     _this.isEqual = function (itemA, itemB) {
       var _this$getProps = _this.getProps(),
@@ -150,11 +151,15 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         var _this$input;
         event.preventDefault();
         // первый focus нужен для предотвращения/уменьшения моргания в других браузерах
-        (_this$input = _this.input) == null || _this$input.focus();
+        (_this$input = _this.input) == null || _this$input.focus({
+          preventScroll: true
+        });
         // в firefox не работает без второго focus
-        globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
+        _this.globalObject.requestAnimationFrame == null || _this.globalObject.requestAnimationFrame(function () {
           var _this$input2;
-          return (_this$input2 = _this.input) == null ? void 0 : _this$input2.focus();
+          return (_this$input2 = _this.input) == null ? void 0 : _this$input2.focus({
+            preventScroll: true
+          });
         });
         _this.dispatch({
           type: 'SET_PREVENT_BLUR',
@@ -198,10 +203,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       }
     };
     _this.isBlurToMenu = function (event) {
-      if (_this.menuRef && globalObject.document) {
+      if (_this.menuRef && _this.globalObject.document) {
         var _this$tokensInputMenu;
         var menu = getRootNode((_this$tokensInputMenu = _this.tokensInputMenu) == null ? void 0 : _this$tokensInputMenu.getMenuRef());
-        var relatedTarget = event.relatedTarget || globalObject.document.activeElement;
+        var relatedTarget = event.relatedTarget || _this.globalObject.document.activeElement;
         if (menu && menu.contains(relatedTarget)) {
           return true;
         }
@@ -222,7 +227,22 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         });
       }
     };
-    _this.handleWrapperMouseUp = function () {
+    _this.handleWrapperMouseUp = function (e) {
+      // Имитируем поведение label, когда задан maxHeight.
+      if (_this.props.maxHeight && e.target === _this.scrollContainerRef.current && (_this.state.activeTokens.length !== 0 || !_this.state.inFocus)) {
+        var _this$input3;
+        _this.dispatch({
+          type: 'BLUR'
+        });
+        _this.dispatch({
+          type: 'SET_FOCUS_IN'
+        });
+        _this.focusInput();
+        (_this$input3 = _this.input) == null || _this$input3.scrollIntoView({
+          behavior: 'auto',
+          block: 'center'
+        });
+      }
       _this.dispatch({
         type: 'SET_PREVENT_BLUR',
         payload: false
@@ -357,7 +377,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       }
     };
     _this.handleInputKeyDown = function (e) {
-      var _this$state$autocompl, _this$state$autocompl2, _this$input3, _this$input4;
+      var _this$state$autocompl, _this$state$autocompl2, _this$input4, _this$input5;
       e.stopPropagation();
       if (_this.type !== TokenInputType.WithReference && _this.getProps().delimiters.some(function (key) {
         return key === e.key || key === ',' && isKeyComma(e);
@@ -394,7 +414,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
           }
           break;
         case isKeyEscape(e):
-          (_this$input3 = _this.input) == null || _this$input3.blur();
+          (_this$input4 = _this.input) == null || _this$input4.blur();
           break;
         case isKeyBackspace(e):
           if (!_this.isEditingMode && isRightmostTokenNotDisabled) {
@@ -402,7 +422,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
           }
           break;
         case isKeyArrowLeft(e):
-          if (((_this$input4 = _this.input) == null ? void 0 : _this$input4.selectionStart) === 0) {
+          if (((_this$input5 = _this.input) == null ? void 0 : _this$input5.selectionStart) === 0) {
             var index = _this.getAvailableTokenIndex(_this.getProps().selectedItems.length);
             var itemNew = _this.getProps().selectedItems[index];
             if (itemNew) {
@@ -415,10 +435,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
           break;
       }
     };
-    _this.focusInput = function () {
-      globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
-        var _this$input5;
-        return (_this$input5 = _this.input) == null ? void 0 : _this$input5.focus();
+    _this.focusInput = function (options) {
+      _this.globalObject.requestAnimationFrame == null || _this.globalObject.requestAnimationFrame(function () {
+        var _this$input6;
+        return (_this$input6 = _this.input) == null ? void 0 : _this$input6.focus(options);
       });
     };
     _this.selectInputText = function () {
@@ -444,9 +464,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
               _this.dispatch({
                 type: 'REMOVE_ALL_ACTIVE_TOKENS'
               }, function () {
-                var _this$input6;
+                var _this$input7;
                 LayoutEvents.emit();
-                (_this$input6 = _this.input) == null || _this$input6.focus();
+                (_this$input7 = _this.input) == null || _this$input7.focus();
               });
             }
             break;
@@ -493,8 +513,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         _this.dispatch({
           type: 'REMOVE_ALL_ACTIVE_TOKENS'
         }, function () {
-          var _this$input7;
-          return (_this$input7 = _this.input) == null ? void 0 : _this$input7.focus();
+          var _this$input8;
+          return (_this$input8 = _this.input) == null ? void 0 : _this$input8.focus();
         });
       } else if (!isLeftEdge) {
         _this.dispatch({
@@ -553,7 +573,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         payload: filteredActiveTokens
       });
       if (filteredActiveTokens.length === 0) {
-        _this.focusInput();
+        _this.focusInput({
+          preventScroll: true
+        });
       }
       _this.tryGetItems();
     };
@@ -573,7 +595,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
           payload: [itemNew]
         });
       }
-      _this.focusInput();
+      _this.focusInput({
+        preventScroll: true
+      });
     };
     _this.handleTokenEdit = function (itemNew) {
       var _this$getProps8 = _this.getProps(),
@@ -651,7 +675,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       // чекаем не возвращает ли что-нибудь обработчик
       var returnedValue = onUnexpectedInput == null ? void 0 : onUnexpectedInput(inputValue);
       if (returnedValue === undefined) {
-        if (_this.featureFlags.tokenInputCreateTokenOnBlurInWithoutReferenceMode && _this.type === TokenInputType.WithoutReference) {
+        if (_this.type === TokenInputType.WithoutReference) {
           _this.handleAddItem();
         }
         return;
@@ -710,7 +734,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         return _this.getProps().selectedItems.slice(_this.state.editingTokenIndex + 1).map(_this.renderToken);
       }
     };
-    _this.renderToken = function (item) {
+    _this.renderToken = function (item, index) {
       var _this$props$selectedI;
       var _this$props = _this.props,
         _this$props$renderTok = _this$props.renderToken,
@@ -746,7 +770,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         onDoubleClick: handleTokenDoubleClick,
         onRemove: handleIconClick,
         disabled: disabled
-      });
+      }, index);
       _this.memoizedTokens.set((_this$props$selectedI = _this.props.selectedItems) == null ? void 0 : _this$props$selectedI.indexOf(item), renderedToken);
       return renderedToken;
     };
@@ -778,7 +802,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       } else if (itemIndex < 0 || itemIndex > _this.getProps().selectedItems.length - 1) {
         return false;
       } else {
-        renderedToken = _this.renderToken(_this.getProps().selectedItems[itemIndex]);
+        renderedToken = _this.renderToken(_this.getProps().selectedItems[itemIndex], itemIndex);
       }
       return renderedToken.props.disabled;
     };
@@ -824,9 +848,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     });
   };
   _proto.componentDidMount = function componentDidMount() {
-    var _globalObject$documen;
+    var _this$globalObject$do;
     this.updateInputTextWidth();
-    (_globalObject$documen = globalObject.document) == null || _globalObject$documen.addEventListener('copy', this.handleCopy);
+    (_this$globalObject$do = this.globalObject.document) == null || _this$globalObject$do.addEventListener('copy', this.handleCopy);
     if (this.props.autoFocus) {
       this.focusInput();
     }
@@ -850,20 +874,20 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     }
   };
   _proto.componentWillUnmount = function componentWillUnmount() {
-    var _globalObject$documen2;
-    (_globalObject$documen2 = globalObject.document) == null || _globalObject$documen2.removeEventListener('copy', this.handleCopy);
+    var _this$globalObject$do2;
+    (_this$globalObject$do2 = this.globalObject.document) == null || _this$globalObject$do2.removeEventListener('copy', this.handleCopy);
   } /**
     * @public
     */;
   _proto.focus = function focus() {
-    var _this$input8;
-    (_this$input8 = this.input) == null || _this$input8.focus();
+    var _this$input9;
+    (_this$input9 = this.input) == null || _this$input9.focus();
   } /**
     * @public
     */;
   _proto.blur = function blur() {
-    var _this$input9;
-    (_this$input9 = this.input) == null || _this$input9.blur();
+    var _this$input10;
+    (_this$input10 = this.input) == null || _this$input10.blur();
   } /** Кратковременно визуально подсвечивает поле ввода, чтобы привлечь внимание пользователя.
     * @public
     */;
@@ -875,40 +899,38 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   };
   _proto.render = function render() {
     var _this2 = this;
-    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
-      _this2.featureFlags = getFullReactUIFlagsContext(flags);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        _this2.theme = theme;
-        return _this2.renderMain();
-      });
+    this.styles = getStyles(this.emotion);
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
     });
   };
   _proto.getLabelSizeClassName = function getLabelSizeClassName() {
     switch (this.size) {
       case 'large':
-        return styles.labelLarge(this.theme);
+        return this.styles.labelLarge(this.theme);
       case 'medium':
-        return styles.labelMedium(this.theme);
+        return this.styles.labelMedium(this.theme);
       case 'small':
       default:
-        return styles.labelSmall(this.theme);
+        return this.styles.labelSmall(this.theme);
     }
   };
   _proto.getInputSizeClassName = function getInputSizeClassName() {
     switch (this.size) {
       case 'large':
-        return styles.inputLarge(this.theme);
+        return this.styles.inputLarge(this.theme);
       case 'medium':
-        return styles.inputMedium(this.theme);
+        return this.styles.inputMedium(this.theme);
       case 'small':
       default:
-        return styles.inputSmall(this.theme);
+        return this.styles.inputSmall(this.theme);
     }
   };
   _proto.renderMain = function renderMain() {
-    var _cx, _cx2, _cx3;
+    var _this$cx, _this$cx2, _this$cx3;
     if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {
-      throw Error('Missed getItems for type ' + this.type);
+      logWarning(false, "getItems is required for \"Combined\" and \"WithReference\" modes.");
     }
     var _this$props2 = this.props,
       maxMenuHeight = _this$props2.maxMenuHeight,
@@ -921,7 +943,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       renderTotalCount = _this$props2.renderTotalCount,
       totalCount = _this$props2.totalCount,
       ariaDescribedby = _this$props2['aria-describedby'],
-      ariaLabel = _this$props2['aria-label'];
+      ariaLabel = _this$props2['aria-label'],
+      maxHeight = _this$props2.maxHeight;
     var _this$getProps11 = this.getProps(),
       selectedItems = _this$getProps11.selectedItems,
       width = _this$getProps11.width,
@@ -948,12 +971,12 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       // в ie не работает, но альтернативный способ --- дать tabindex для label --- предположительно ещё сложнее
       caretColor: this.isCursorVisible ? undefined : 'transparent'
     };
-    var labelClassName = cx(styles.label(theme), this.getLabelSizeClassName(), (_cx = {}, _cx[styles.hovering(this.theme)] = !inFocus && !disabled && !warning && !error, _cx[styles.labelDisabled(theme)] = !!disabled, _cx[styles.labelFocused(theme)] = !!inFocus, _cx[styles.error(theme)] = !!error, _cx[styles.warning(theme)] = !!warning, _cx));
-    var inputClassName = cx(styles.input(theme), this.getInputSizeClassName(), (_cx2 = {}, _cx2[styles.inputDisabled(theme)] = !!disabled, _cx2));
+    var labelClassName = this.cx(this.styles.label(theme), this.getLabelSizeClassName(), (_this$cx = {}, _this$cx[this.styles.hovering(this.theme)] = !inFocus && !disabled && !warning && !error, _this$cx[this.styles.labelDisabled(theme)] = !!disabled, _this$cx[this.styles.labelFocused(theme)] = !!inFocus, _this$cx[this.styles.error(theme)] = !!error, _this$cx[this.styles.warning(theme)] = !!warning, _this$cx));
+    var inputClassName = this.cx(this.styles.input(theme), this.getInputSizeClassName(), (_this$cx2 = {}, _this$cx2[this.styles.inputDisabled(theme)] = !!disabled, _this$cx2));
     var placeholder = selectedItems.length === 0 && !inputValue ? this.props.placeholder : '';
     var inputNode = /*#__PURE__*/React.createElement(TokenView, {
       size: this.size,
-      className: cx((_cx3 = {}, _cx3[styles.inputPlaceholderWrapper()] = Boolean(placeholder), _cx3)),
+      className: this.cx((_this$cx3 = {}, _this$cx3[this.styles.inputPlaceholderWrapper()] = Boolean(placeholder), _this$cx3)),
       hideCloseButton: Boolean(placeholder)
     }, /*#__PURE__*/React.createElement("textarea", {
       id: this.textareaId,
@@ -973,24 +996,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       "aria-label": ariaLabel,
       "aria-describedby": ariaDescribedby
     }));
-    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-      rootNodeRef: this.setRootNode
-    }, this.props), /*#__PURE__*/React.createElement("div", {
-      "data-tid": TokenInputDataTids.root,
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave
-    }, /*#__PURE__*/React.createElement("label", {
-      ref: this.wrapperRef,
-      style: {
-        width: width
-      },
-      className: labelClassName,
-      onMouseDown: this.handleWrapperMouseDown,
-      onMouseUp: this.handleWrapperMouseUp,
-      htmlFor: this.textareaId,
-      "aria-controls": this.rootId,
-      "data-tid": TokenInputDataTids.label
-    }, /*#__PURE__*/React.createElement(TextWidthHelper, {
+    var inner = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextWidthHelper, {
       ref: this.textHelperRef,
       text: inputValue,
       theme: this.theme,
@@ -1016,8 +1022,33 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/React.createElement(TokenView, {
       size: this.size
     }, /*#__PURE__*/React.createElement("span", {
-      className: styles.reservedInput(theme)
-    }, reservedInputValue)) : null)));
+      className: this.styles.reservedInput(theme)
+    }, reservedInputValue)) : null);
+    var container = maxHeight ? /*#__PURE__*/React.createElement(ScrollContainer, {
+      scrollRef: this.scrollContainerRef,
+      maxHeight: maxHeight,
+      showScrollBar: "always"
+    }, inner) : inner;
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("div", {
+      "data-tid": TokenInputDataTids.root,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave
+    }, /*#__PURE__*/React.createElement("label", {
+      ref: this.wrapperRef,
+      style: {
+        width: width
+      },
+      className: labelClassName,
+      onMouseDown: this.handleWrapperMouseDown,
+      onMouseUp: this.handleWrapperMouseUp // Для корректной работы скролла приходится ломать связь label с полем ввода
+      // Иначе любой клик внутри label вызывает фокус и автоскроллинг к полю ввода
+      ,
+      htmlFor: maxHeight ? 'fake-id' : this.textareaId,
+      "aria-controls": this.rootId,
+      "data-tid": TokenInputDataTids.label
+    }, container)));
   } /**
     * Сбрасывает введенное пользователем значение
     * @public
@@ -1148,4 +1179,4 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   onMouseLeave: emptyHandler,
   menuWidth: 'auto',
   menuAlign: 'cursor'
-}, _TokenInput)) || _class) || _class) || _class);
+}, _TokenInput)) || _class) || _class) || _class) || _class);