@skbkontur/react-ui 5.6.1-9a162.0 → 6.0.0-alpha.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,17 +16,16 @@ 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 { styles } from "../TokenInput.styles";
+import { getStyles } from "../TokenInput.styles";
 import { tokenInputReducer } from "../TokenInputReducer";
 import { TokenInputMenu } from "../TokenInputMenu";
 import { TextWidthHelper } from "../TextWidthHelper";
@@ -54,14 +53,12 @@ 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, index) {
+var defaultRenderToken = function defaultRenderToken(item, _ref) {
   var isActive = _ref.isActive,
     onClick = _ref.onClick,
     onDoubleClick = _ref.onDoubleClick,
@@ -84,7 +81,7 @@ var defaultRenderToken = function defaultRenderToken(item, _ref, index) {
 
 /** Поле с токенами — это поле ввода со списком подсказок. Значения в поле отображаются в виде отдельных токенов — компонент [Token](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-tokeninput-token--docs).
  */
-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++) {
@@ -118,16 +115,16 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       });
     };
     _this.inputRef = function (node) {
-      return _this.input = node;
+      _this.input = node;
     };
     _this.tokensInputMenuRef = function (node) {
-      return _this.tokensInputMenu = node;
+      _this.tokensInputMenu = node;
     };
     _this.textHelperRef = function (node) {
-      return _this.textHelper = node;
+      _this.textHelper = node;
     };
     _this.wrapperRef = function (node) {
-      return _this.wrapper = node;
+      _this.wrapper = node;
     };
     _this.dispatch = function (action, cb) {
       _this.setState(function (prevState) {
@@ -153,7 +150,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
           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({
             preventScroll: true
@@ -202,10 +199,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;
         }
@@ -436,7 +433,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       }
     };
     _this.focusInput = function (options) {
-      globalObject.requestAnimationFrame == null || globalObject.requestAnimationFrame(function () {
+      _this.globalObject.requestAnimationFrame == null || _this.globalObject.requestAnimationFrame(function () {
         var _this$input6;
         return (_this$input6 = _this.input) == null ? void 0 : _this$input6.focus(options);
       });
@@ -676,7 +673,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;
@@ -849,9 +846,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();
     }
@@ -875,8 +872,8 @@ 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
@@ -901,40 +898,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,
@@ -975,12 +970,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,
@@ -1026,7 +1021,7 @@ 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)
+      className: this.styles.reservedInput(theme)
     }, reservedInputValue)) : null);
     var container = maxHeight ? /*#__PURE__*/React.createElement(ScrollContainer, {
       scrollRef: this.scrollContainerRef,
@@ -1172,7 +1167,6 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   valueToItem: function valueToItem(item) {
     return item;
   },
-  toKey: defaultToKey,
   itemToId: identity,
   onValueChange: function onValueChange() {
     return void 0;
@@ -1184,7 +1178,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   onMouseLeave: emptyHandler,
   menuWidth: 'auto',
   menuAlign: 'cursor'
-}, _TokenInput)) || _class) || _class) || _class);
+}, _TokenInput)) || _class) || _class) || _class) || _class);
 function isSimpleItem(item) {
   return !isFunction(item) && ! /*#__PURE__*/React.isValidElement(item);
 }