@skbkontur/react-ui 0.0.0-8ea1692541 → 0.0.0-942b5aade9

package/components/TokenInput/TokenInput/TokenInput.js

@@ -6,53 +6,13 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _dec, _class, _class2, _temp;
 
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-
-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 isEqual from 'lodash.isequal';
+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";
 import { Token } from "../../Token";
-import { emptyHandler } from "../../../lib/utils";
+import { emptyHandler, getRandomID } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { locale } from "../../../lib/locale/decorators";
 import { MenuItem } from "../../MenuItem/MenuItem";
@@ -60,6 +20,8 @@ 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 { globalThat, renderTarget } from "../../../lib/SSRSafe";
 import { TokenInputLocaleHelper } from "../locale";
 import { styles } from "../TokenInput.styles";
 import { tokenInputReducer } from "../TokenInputReducer";
@@ -87,7 +49,8 @@ export var DefaultState = {
 };
 export var TokenInputDataTids = {
   root: 'TokenInput__root',
-  tokenInputMenu: 'TokenInputMenu__root'
+  tokenInputMenu: 'TokenInputMenu__root',
+  label: 'TokenInput__label'
 };
 
 var defaultToKey = function defaultToKey(item) {
@@ -127,10 +90,13 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
     _this.getProps = createPropsGetter(TokenInput.defaultProps);
     _this.state = DefaultState;
+    _this.textareaId = getUid();
+    _this.rootId = PopupIds.root + getRandomID();
     _this.input = null;
     _this.tokensInputMenu = null;
     _this.textHelper = null;
     _this.wrapper = null;
+    _this.memoizedTokens = new Map();
 
     _this.hasValueInItems = function (items, value) {
       if (typeof value === 'string') {
@@ -187,7 +153,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
         (_this$input = _this.input) == null ? void 0 : _this$input.focus(); // в firefox не работает без второго focus
 
-        requestAnimationFrame(function () {
+        globalThat.requestAnimationFrame(function () {
           var _this$input2;
 
           return (_this$input2 = _this.input) == null ? void 0 : _this$input2.focus();
@@ -247,7 +213,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         var _this$tokensInputMenu;
 
         var menu = getRootNode((_this$tokensInputMenu = _this.tokensInputMenu) == null ? void 0 : _this$tokensInputMenu.getMenuRef());
-        var relatedTarget = event.relatedTarget || document.activeElement;
+        var relatedTarget = event.relatedTarget || renderTarget.activeElement;
 
         if (menu && menu.contains(relatedTarget)) {
           return true;
@@ -324,18 +290,12 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       })) {
         event.preventDefault();
         event.stopPropagation();
+        var tokens = paste.trim().split(new RegExp("[" + delimiters.join('') + "]+"));
 
-        for (var _iterator = _createForOfIteratorHelperLoose(delimiters), _step; !(_step = _iterator()).done;) {
-          var delimiter = _step.value;
-          paste = paste.split(delimiter).join(delimiters[0]);
-        }
-
-        var tokens = paste.split(delimiters[0]);
-
-        var _items = tokens.map(function (token) {
+        var _items = tokens.filter(Boolean).map(function (token) {
           return valueToItem(token);
         }).filter(function (item) {
-          return !_this.hasValueInItems(selectedItems, item);
+          return item && !_this.hasValueInItems(selectedItems, item);
         });
 
         var newItems = selectedItems.concat(_items);
@@ -466,6 +426,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         }
       }
 
+      var isRightmostTokenNotDisabled = !_this.isTokenDisabled(_this.getProps().selectedItems.length - 1);
+
       switch (true) {
         case isKeyEnter(e):
           if (_this.menuRef) {
@@ -495,7 +457,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
           break;
 
         case isKeyBackspace(e):
-          if (!_this.isEditingMode) {
+          if (!_this.isEditingMode && isRightmostTokenNotDisabled) {
             _this.moveFocusToLastToken();
           }
 
@@ -503,7 +465,16 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
         case isKeyArrowLeft(e):
           if (((_this$input4 = _this.input) == null ? void 0 : _this$input4.selectionStart) === 0) {
-            _this.moveFocusToLastToken();
+            var index = _this.getAvailableTokenIndex(_this.getProps().selectedItems.length);
+
+            var itemNew = _this.getProps().selectedItems[index];
+
+            if (itemNew) {
+              _this.dispatch({
+                type: 'SET_ACTIVE_TOKENS',
+                payload: [itemNew]
+              });
+            }
           }
 
           break;
@@ -511,7 +482,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
 
     _this.focusInput = function () {
-      requestAnimationFrame(function () {
+      globalThat.requestAnimationFrame(function () {
         var _this$input5;
 
         return (_this$input5 = _this.input) == null ? void 0 : _this$input5.focus();
@@ -535,7 +506,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         case isKeyBackspace(e):
         case isKeyDelete(e):
           {
-            if (!_this.isEditingMode) {
+            var indexOfActiveToken = _this.getProps().selectedItems.indexOf(_this.state.activeTokens[_this.state.activeTokens.length - 1]);
+
+            if (!_this.isEditingMode && !_this.isTokenDisabled(indexOfActiveToken)) {
               var itemsNew = selectedItems.filter(function (item) {
                 return !_this.hasValueInItems(_this.state.activeTokens, item);
               });
@@ -577,7 +550,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
           _this.dispatch({
             type: 'SET_ACTIVE_TOKENS',
-            payload: selectedItems
+            payload: selectedItems.filter(function (item) {
+              return !_this.isTokenDisabled(selectedItems.indexOf(item));
+            })
           });
 
           break;
@@ -591,9 +566,11 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
       var activeTokens = _this.state.activeTokens;
       var activeItemIndex = selectedItems.indexOf(activeTokens[0]);
-      var newItemIndex = activeItemIndex + (isKeyArrowLeft(e) ? -1 : +1);
+
+      var newItemIndex = _this.getAvailableTokenIndex(activeItemIndex, isKeyArrowLeft(e));
+
       var isLeftEdge = activeItemIndex === 0 && isKeyArrowLeft(e);
-      var isRightEdge = activeItemIndex === selectedItems.length - 1 && isKeyArrowRight(e);
+      var isRightEdge = newItemIndex === selectedItems.length && isKeyArrowRight(e);
 
       if (!e.shiftKey && activeTokens.length === 1) {
         _this.handleWrapperArrowsWithoutShift(isLeftEdge, isRightEdge, newItemIndex);
@@ -872,6 +849,8 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
     };
 
     _this.renderToken = function (item) {
+      var _this$props$selectedI;
+
       var _this$props = _this.props,
           _this$props$renderTok = _this$props.renderToken,
           renderToken = _this$props$renderTok === void 0 ? defaultRenderToken : _this$props$renderTok,
@@ -900,18 +879,22 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       var handleTokenDoubleClick = function handleTokenDoubleClick(event) {
         event.stopPropagation();
 
-        if (!_this.isEditingMode) {
+        if (!_this.isEditingMode && !disabled) {
           _this.handleTokenEdit(item);
         }
       };
 
-      return renderToken(item, {
+      var renderedToken = renderToken(item, {
         isActive: isActive,
         onClick: handleTokenClick,
         onDoubleClick: handleTokenDoubleClick,
         onRemove: handleIconClick,
         disabled: disabled
       });
+
+      _this.memoizedTokens.set((_this$props$selectedI = _this.props.selectedItems) == null ? void 0 : _this$props$selectedI.indexOf(item), renderedToken);
+
+      return renderedToken;
     };
 
     _this.renderAddButton = function (value) {
@@ -937,6 +920,44 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       }, addButtonTitle, " ", value);
     };
 
+    _this.isTokenDisabled = function (itemIndex) {
+      var renderedToken;
+
+      if (_this.memoizedTokens.has(itemIndex)) {
+        renderedToken = _this.memoizedTokens.get(itemIndex);
+      } else if (itemIndex < 0 || itemIndex > _this.getProps().selectedItems.length - 1) {
+        return false;
+      } else {
+        renderedToken = _this.renderToken(_this.getProps().selectedItems[itemIndex]);
+      }
+
+      return renderedToken.props.disabled;
+    };
+
+    _this.getAvailableTokenIndex = function (startIndex, isDirectionLeft) {
+      if (isDirectionLeft === void 0) {
+        isDirectionLeft = true;
+      }
+
+      var _this$getProps7 = _this.getProps(),
+          selectedItems = _this$getProps7.selectedItems;
+
+      var step = isDirectionLeft ? -1 : +1;
+      var availableIndex = startIndex + step;
+
+      while (_this.isTokenDisabled(availableIndex)) {
+        availableIndex += step;
+
+        if (availableIndex === selectedItems.length) {
+          return availableIndex;
+        } else if (availableIndex === -1) {
+          return startIndex;
+        }
+      }
+
+      return availableIndex;
+    };
+
     return _this;
   }
 
@@ -944,7 +965,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
   _proto.componentDidMount = function componentDidMount() {
     this.updateInputTextWidth();
-    document.addEventListener('copy', this.handleCopy);
+    renderTarget.addEventListener('copy', this.handleCopy);
 
     if (this.props.autoFocus) {
       this.focusInput();
@@ -965,6 +986,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
 
     if (prevProps.selectedItems.length !== this.getProps().selectedItems.length) {
       LayoutEvents.emit();
+      this.memoizedTokens.clear();
     }
 
     if (!this.isCursorVisibleForState(prevState) && this.isCursorVisible) {
@@ -973,7 +995,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
-    document.removeEventListener('copy', this.handleCopy);
+    renderTarget.removeEventListener('copy', this.handleCopy);
   }
   /**
   * @public
@@ -1022,16 +1044,17 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
         hideMenuIfEmptyInputValue = _this$props2.hideMenuIfEmptyInputValue,
         inputMode = _this$props2.inputMode,
         renderTotalCount = _this$props2.renderTotalCount,
-        totalCount = _this$props2.totalCount;
-
-    var _this$getProps7 = this.getProps(),
-        selectedItems = _this$getProps7.selectedItems,
-        width = _this$getProps7.width,
-        onMouseEnter = _this$getProps7.onMouseEnter,
-        onMouseLeave = _this$getProps7.onMouseLeave,
-        menuWidth = _this$getProps7.menuWidth,
-        menuAlign = _this$getProps7.menuAlign,
-        renderItem = _this$getProps7.renderItem;
+        totalCount = _this$props2.totalCount,
+        ariaDescribedby = _this$props2['aria-describedby'];
+
+    var _this$getProps8 = this.getProps(),
+        selectedItems = _this$getProps8.selectedItems,
+        width = _this$getProps8.width,
+        onMouseEnter = _this$getProps8.onMouseEnter,
+        onMouseLeave = _this$getProps8.onMouseLeave,
+        menuWidth = _this$getProps8.menuWidth,
+        menuAlign = _this$getProps8.menuAlign,
+        renderItem = _this$getProps8.renderItem;
 
     var _this$state3 = this.state,
         activeTokens = _this$state3.activeTokens,
@@ -1054,7 +1077,7 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       // в ie не работает, но альтернативный способ --- дать tabindex для label --- предположительно ещё сложнее
       caretColor: this.isCursorVisible ? undefined : 'transparent'
     };
-    var labelClassName = cx(styles.label(theme), (_cx = {}, _cx[styles.labelDisabled(theme)] = !!disabled, _cx[styles.labelFocused(theme)] = !!inFocus, _cx[styles.error(theme)] = !!error, _cx[styles.warning(theme)] = !!warning, _cx));
+    var labelClassName = cx(styles.label(theme), (_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), (_cx2 = {}, _cx2[styles.inputDisabled(theme)] = !!disabled, _cx2[styles.inputEditing(theme)] = this.isEditingMode, _cx2));
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
       rootNodeRef: this.setRootNode
@@ -1069,13 +1092,17 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       },
       className: labelClassName,
       onMouseDown: this.handleWrapperMouseDown,
-      onMouseUp: this.handleWrapperMouseUp
+      onMouseUp: this.handleWrapperMouseUp,
+      htmlFor: this.textareaId,
+      "aria-controls": this.rootId,
+      "data-tid": TokenInputDataTids.label
     }, /*#__PURE__*/React.createElement(TextWidthHelper, {
       ref: this.textHelperRef,
       classHelp: cx(styles.helperText(theme), (_cx3 = {}, _cx3[styles.helperTextEditing(theme)] = this.isEditingMode, _cx3)),
       text: inputValue,
       theme: this.theme
     }), this.renderTokensStart(), /*#__PURE__*/React.createElement("textarea", {
+      id: this.textareaId,
       ref: this.inputRef,
       value: inputValue,
       style: inputInlineStyles,
@@ -1088,8 +1115,10 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
       onChange: this.handleChangeInputValue,
       onKeyDown: this.handleKeyDown,
       onPaste: this.handleInputPaste,
-      inputMode: inputMode
+      inputMode: inputMode,
+      "aria-describedby": ariaDescribedby
     }), showMenu && /*#__PURE__*/React.createElement(TokenInputMenu, {
+      popupMenuId: this.rootId,
       ref: this.tokensInputMenuRef,
       items: autocompleteItems,
       loading: loading,
@@ -1214,9 +1243,9 @@ export var TokenInput = (_dec = locale('TokenInput', TokenInputLocaleHelper), ro
           inputValue = _this$state4.inputValue,
           editingTokenIndex = _this$state4.editingTokenIndex;
 
-      var _this$getProps8 = this.getProps(),
-          valueToString = _this$getProps8.valueToString,
-          selectedItems = _this$getProps8.selectedItems;
+      var _this$getProps9 = this.getProps(),
+          valueToString = _this$getProps9.valueToString,
+          selectedItems = _this$getProps9.selectedItems;
 
       if (this.isEditingMode) {
         return valueToString(selectedItems[editingTokenIndex]) !== inputValue;