@skbkontur/react-ui 5.6.1-85c65.0 → 5.6.1-9a162.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 logWarning from 'warning';
+import { globalObject } from '@skbkontur/global-object';
 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,17 @@ import { isFunction, 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 { getStyles } from "../TokenInput.styles";
+import { styles } from "../TokenInput.styles";
 import { tokenInputReducer } from "../TokenInputReducer";
 import { TokenInputMenu } from "../TokenInputMenu";
 import { TextWidthHelper } from "../TextWidthHelper";
@@ -53,12 +54,14 @@ export var TokenInputDataTids = {
   tokenInputMenu: 'TokenInputMenu__root',
   label: 'TokenInput__label'
 };
-
+var defaultToKey = function defaultToKey(item) {
+  return item.toString();
+};
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 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,
@@ -81,7 +84,7 @@ var defaultRenderToken = function defaultRenderToken(item, _ref) {
 
 /** Поле с токенами — это поле ввода со списком подсказок. Значения в поле отображаются в виде отдельных токенов — компонент [Token](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-tokeninput-token--docs).
  */
-export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), withRenderEnvironment(_class = rootNode(_class = _dec(_class = withSize(_class = (_TokenInput = /*#__PURE__*/function (_React$PureComponent) {
+export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), 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++) {
@@ -115,16 +118,16 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), wi
       });
     };
     _this.inputRef = function (node) {
-      _this.input = node;
+      return _this.input = node;
     };
     _this.tokensInputMenuRef = function (node) {
-      _this.tokensInputMenu = node;
+      return _this.tokensInputMenu = node;
     };
     _this.textHelperRef = function (node) {
-      _this.textHelper = node;
+      return _this.textHelper = node;
     };
     _this.wrapperRef = function (node) {
-      _this.wrapper = node;
+      return _this.wrapper = node;
     };
     _this.dispatch = function (action, cb) {
       _this.setState(function (prevState) {
@@ -150,7 +153,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), wi
           preventScroll: true
         });
         // в firefox не работает без второго focus
-        _this.globalObject.requestAnimationFrame == null || _this.globalObject.requestAnimationFrame(function () {
+        globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
           var _this$input2;
           return (_this$input2 = _this.input) == null ? void 0 : _this$input2.focus({
             preventScroll: true
@@ -199,10 +202,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), wi
       }
     };
     _this.isBlurToMenu = function (event) {
-      if (_this.menuRef && _this.globalObject.document) {
+      if (_this.menuRef && globalObject.document) {
         var _this$tokensInputMenu;
         var menu = getRootNode((_this$tokensInputMenu = _this.tokensInputMenu) == null ? void 0 : _this$tokensInputMenu.getMenuRef());
-        var relatedTarget = event.relatedTarget || _this.globalObject.document.activeElement;
+        var relatedTarget = event.relatedTarget || globalObject.document.activeElement;
         if (menu && menu.contains(relatedTarget)) {
           return true;
         }
@@ -433,7 +436,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), wi
       }
     };
     _this.focusInput = function (options) {
-      _this.globalObject.requestAnimationFrame == null || _this.globalObject.requestAnimationFrame(function () {
+      globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
         var _this$input6;
         return (_this$input6 = _this.input) == null ? void 0 : _this$input6.focus(options);
       });
@@ -673,7 +676,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), wi
       // чекаем не возвращает ли что-нибудь обработчик
       var returnedValue = onUnexpectedInput == null ? void 0 : onUnexpectedInput(inputValue);
       if (returnedValue === undefined) {
-        if (_this.type === TokenInputType.WithoutReference) {
+        if (_this.featureFlags.tokenInputCreateTokenOnBlurInWithoutReferenceMode && _this.type === TokenInputType.WithoutReference) {
           _this.handleAddItem();
         }
         return;
@@ -846,9 +849,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), wi
     });
   };
   _proto.componentDidMount = function componentDidMount() {
-    var _this$globalObject$do;
+    var _globalObject$documen;
     this.updateInputTextWidth();
-    (_this$globalObject$do = this.globalObject.document) == null || _this$globalObject$do.addEventListener('copy', this.handleCopy);
+    (_globalObject$documen = globalObject.document) == null || _globalObject$documen.addEventListener('copy', this.handleCopy);
     if (this.props.autoFocus) {
       this.focusInput();
     }
@@ -872,8 +875,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), wi
     }
   };
   _proto.componentWillUnmount = function componentWillUnmount() {
-    var _this$globalObject$do2;
-    (_this$globalObject$do2 = this.globalObject.document) == null || _this$globalObject$do2.removeEventListener('copy', this.handleCopy);
+    var _globalObject$documen2;
+    (_globalObject$documen2 = globalObject.document) == null || _globalObject$documen2.removeEventListener('copy', this.handleCopy);
   } /** Программно устанавливает фокус на поле.
     * Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.
     * @public
@@ -898,38 +901,40 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), wi
   };
   _proto.render = function render() {
     var _this2 = this;
-    this.styles = getStyles(this.emotion);
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+    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();
+      });
     });
   };
   _proto.getLabelSizeClassName = function getLabelSizeClassName() {
     switch (this.size) {
       case 'large':
-        return this.styles.labelLarge(this.theme);
+        return styles.labelLarge(this.theme);
       case 'medium':
-        return this.styles.labelMedium(this.theme);
+        return styles.labelMedium(this.theme);
       case 'small':
       default:
-        return this.styles.labelSmall(this.theme);
+        return styles.labelSmall(this.theme);
     }
   };
   _proto.getInputSizeClassName = function getInputSizeClassName() {
     switch (this.size) {
       case 'large':
-        return this.styles.inputLarge(this.theme);
+        return styles.inputLarge(this.theme);
       case 'medium':
-        return this.styles.inputMedium(this.theme);
+        return styles.inputMedium(this.theme);
       case 'small':
       default:
-        return this.styles.inputSmall(this.theme);
+        return styles.inputSmall(this.theme);
     }
   };
   _proto.renderMain = function renderMain() {
-    var _this$cx, _this$cx2, _this$cx3;
+    var _cx, _cx2, _cx3;
     if (this.type !== TokenInputType.WithoutReference && !this.props.getItems) {
-      logWarning(false, "getItems is required for \"Combined\" and \"WithReference\" modes.");
+      throw Error('Missed getItems for type ' + this.type);
     }
     var _this$props2 = this.props,
       maxMenuHeight = _this$props2.maxMenuHeight,
@@ -970,12 +975,12 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), wi
       // в ie не работает, но альтернативный способ --- дать tabindex для label --- предположительно ещё сложнее
       caretColor: this.isCursorVisible ? undefined : 'transparent'
     };
-    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 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 placeholder = selectedItems.length === 0 && !inputValue ? this.props.placeholder : '';
     var inputNode = /*#__PURE__*/React.createElement(TokenView, {
       size: this.size,
-      className: this.cx((_this$cx3 = {}, _this$cx3[this.styles.inputPlaceholderWrapper()] = Boolean(placeholder), _this$cx3)),
+      className: cx((_cx3 = {}, _cx3[styles.inputPlaceholderWrapper()] = Boolean(placeholder), _cx3)),
       hideCloseButton: Boolean(placeholder)
     }, /*#__PURE__*/React.createElement("textarea", {
       id: this.textareaId,
@@ -1021,7 +1026,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), wi
     }), this.renderTokensEnd(), this.isEditingMode ? /*#__PURE__*/React.createElement(TokenView, {
       size: this.size
     }, /*#__PURE__*/React.createElement("span", {
-      className: this.styles.reservedInput(theme)
+      className: styles.reservedInput(theme)
     }, reservedInputValue)) : null);
     var container = maxHeight ? /*#__PURE__*/React.createElement(ScrollContainer, {
       scrollRef: this.scrollContainerRef,
@@ -1167,6 +1172,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), wi
   valueToItem: function valueToItem(item) {
     return item;
   },
+  toKey: defaultToKey,
   itemToId: identity,
   onValueChange: function onValueChange() {
     return void 0;
@@ -1178,7 +1184,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), wi
   onMouseLeave: emptyHandler,
   menuWidth: 'auto',
   menuAlign: 'cursor'
-}, _TokenInput)) || _class) || _class) || _class) || _class);
+}, _TokenInput)) || _class) || _class) || _class);
 function isSimpleItem(item) {
   return !isFunction(item) && ! /*#__PURE__*/React.isValidElement(item);
 }