@skbkontur/react-ui 6.4.4 → 6.4.6-b246a.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.4.5](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@6.4.4...@skbkontur/react-ui@6.4.5) (2026-10-21)
+
+
+### Bug Fixes
+
+* **TokenInput:** deselect tokens upon shift selection ([c830f52](https://github.com/skbkontur/retail-ui/commit/c830f52cc691e7e1c63bcfbcff3bd4819b1d157b))
+
+
+
+
+
 ## [6.4.4](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@6.4.3...@skbkontur/react-ui@6.4.4) (2026-10-13)
 
 

package/components/TokenInput/TokenInput.d.ts

@@ -155,6 +155,7 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private textHelper;
     private wrapper;
     private scrollContainerRef;
+    private scrollContainerInnerRef;
     getRootNode: TGetRootNode;
     private setRootNode;
     private memoizedTokens;
@@ -238,6 +239,7 @@ export declare class TokenInput<T = string> extends React.PureComponent<TokenInp
     private selectInputText;
     private handleWrapperKeyDown;
     private handleWrapperArrows;
+    private scrollToSelection;
     private handleWrapperArrowsWithoutShift;
     private handleWrapperArrowsWithShift;
     private handleValueChange;

package/components/TokenInput/TokenInput.js

@@ -148,6 +148,7 @@ var TokenInput = /** @class */ (function (_super) {
         _this.textHelper = null;
         _this.wrapper = null;
         _this.scrollContainerRef = React.createRef();
+        _this.scrollContainerInnerRef = React.createRef();
         _this.memoizedTokens = new Map();
         _this.menuNavigatedByUser = false;
         _this.requestId = 0;
@@ -199,6 +200,7 @@ var TokenInput = /** @class */ (function (_super) {
                 _c));
             var placeholder = selectedItems.length === 0 && !inputValue ? _this.props.placeholder : '';
             var inputNode = (React.createElement(TokenView, { size: _this.size, className: _this.cx((_d = {},
+                    _d[_this.styles.inputWrapperDisabled()] = !!disabled,
                     // input растягивается на всю ширину чтобы placeholder не обрезался
                     _d[_this.styles.inputPlaceholderWrapper()] = Boolean(placeholder),
                     _d)), hideCloseButton: Boolean(placeholder) },
@@ -211,7 +213,7 @@ var TokenInput = /** @class */ (function (_super) {
                 _this.renderTokensEnd(interactive),
                 _this.isEditingMode ? (React.createElement(TokenView, { size: _this.size },
                     React.createElement("span", { className: _this.styles.reservedInput(theme) }, reservedInputValue))) : null));
-            var container = maxHeight && !isMobileFooter ? (React.createElement(ScrollContainer, { className: _this.styles.inputPlaceholderScrollWrapper(), scrollRef: _this.scrollContainerRef, maxHeight: maxHeight, showScrollBar: "always", style: { width: '100%' } }, inner)) : (inner);
+            var container = maxHeight && !isMobileFooter ? (React.createElement(ScrollContainer, { ref: _this.scrollContainerRef, className: _this.styles.inputPlaceholderScrollWrapper(), scrollRef: _this.scrollContainerInnerRef, maxHeight: maxHeight, showScrollBar: "always", style: { width: '100%' } }, inner)) : (inner);
             var labelStyle = {
                 width: fieldWidth,
             };
@@ -362,7 +364,7 @@ var TokenInput = /** @class */ (function (_super) {
             var _a;
             // Имитируем поведение label, когда задан maxHeight.
             if (_this.props.maxHeight &&
-                e.target === _this.scrollContainerRef.current &&
+                e.target === _this.scrollContainerInnerRef.current &&
                 (_this.state.activeTokens.length !== 0 || !_this.state.inFocus)) {
                 _this.dispatch({ type: 'BLUR' });
                 _this.dispatch({ type: 'SET_FOCUS_IN' });
@@ -576,7 +578,7 @@ var TokenInput = /** @class */ (function (_super) {
                         var index = _this.getAvailableTokenIndex(_this.getProps().selectedItems.length);
                         var itemNew = _this.getProps().selectedItems[index];
                         if (itemNew) {
-                            _this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: [itemNew] });
+                            _this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: [itemNew] }, _this.scrollToSelection);
                         }
                     }
                     break;
@@ -638,33 +640,82 @@ var TokenInput = /** @class */ (function (_super) {
             var selectedItems = _this.getProps().selectedItems;
             var activeTokens = _this.state.activeTokens;
             var activeItemIndex = selectedItems.indexOf(activeTokens[0]);
+            var isRightDirection = isKeyArrowRight(e);
             var newItemIndex = _this.getAvailableTokenIndex(activeItemIndex, isKeyArrowLeft(e));
-            var isLeftEdge = activeItemIndex === 0 && isKeyArrowLeft(e);
-            var isRightEdge = newItemIndex === selectedItems.length && isKeyArrowRight(e);
+            var isLeftEdge = newItemIndex === activeItemIndex && isKeyArrowLeft(e);
+            var isRightEdge = newItemIndex === selectedItems.length && isRightDirection;
+            if (!e.shiftKey && activeTokens.length > 1) {
+                var activeIndices = activeTokens.map(function (item) { return selectedItems.indexOf(item); });
+                var edgeIndex = isRightDirection ? Math.max.apply(Math, activeIndices) : Math.min.apply(Math, activeIndices);
+                var isRightEdgeOfSelection = isRightDirection && _this.getAvailableTokenIndex(edgeIndex, false) === selectedItems.length;
+                var nextActiveTokens = isRightEdgeOfSelection ? [] : [selectedItems[edgeIndex]];
+                _this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: nextActiveTokens }, _this.scrollToSelection);
+                return;
+            }
             if (!e.shiftKey && activeTokens.length === 1) {
                 _this.handleWrapperArrowsWithoutShift(isLeftEdge, isRightEdge, newItemIndex);
             }
             else {
-                _this.handleWrapperArrowsWithShift(isLeftEdge, isRightEdge, newItemIndex);
+                _this.handleWrapperArrowsWithShift(isLeftEdge, isRightEdge, isRightDirection, newItemIndex, activeItemIndex);
             }
         };
+        _this.scrollToSelection = function () {
+            var _a, _b;
+            var activeItemIndex = _this.getProps().selectedItems.indexOf(_this.state.activeTokens[0]);
+            // TextWidthHelper is the first child; each token renders one root element.
+            var node = activeItemIndex < 0
+                ? _this.input
+                : (_a = _this.scrollContainerInnerRef.current) === null || _a === void 0 ? void 0 : _a.children.item(activeItemIndex + 1);
+            (_b = _this.scrollContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo(node);
+        };
         _this.handleWrapperArrowsWithoutShift = function (isLeftEdge, isRightEdge, newItemIndex) {
             if (isRightEdge) {
-                _this.dispatch({ type: 'REMOVE_ALL_ACTIVE_TOKENS' }, function () { var _a; return (_a = _this.input) === null || _a === void 0 ? void 0 : _a.focus(); });
+                _this.dispatch({ type: 'REMOVE_ALL_ACTIVE_TOKENS' }, _this.scrollToSelection);
             }
             else if (!isLeftEdge) {
                 _this.dispatch({
                     type: 'SET_ACTIVE_TOKENS',
                     payload: [_this.getProps().selectedItems[newItemIndex]],
-                });
+                }, _this.scrollToSelection);
             }
         };
-        _this.handleWrapperArrowsWithShift = function (isLeftEdge, isRightEdge, newItemIndex) {
-            if (!isLeftEdge && !isRightEdge) {
-                var itemNew_1 = _this.getProps().selectedItems[newItemIndex];
-                var itemsNew = __spreadArray([itemNew_1], _this.state.activeTokens.filter(function (item) { return !_this.isEqual(item, itemNew_1); }), true);
-                _this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: itemsNew });
+        _this.handleWrapperArrowsWithShift = function (isLeftEdge, isRightEdge, isRightDirection, newItemIndex, activeItemIndex) {
+            var selectedItems = _this.getProps().selectedItems;
+            var activeTokens = _this.state.activeTokens;
+            var isActive = function (item) {
+                return activeTokens.some(function (activeItem) { return _this.isEqual(activeItem, item); });
+            };
+            var currentItem = selectedItems[activeItemIndex];
+            var selectionWithoutCurrentItem = function () { return activeTokens.filter(function (item) { return !_this.isEqual(item, currentItem); }); };
+            if (isLeftEdge || isRightEdge) {
+                /** Когда стрелка упирается в край, дальше двигаться нельзя.
+                 * Проверяем ближайший доступный токен в обратном направлении,
+                 * пропуская disabled токены.
+                   Если текущий токен выделен, а сосед не выделен или его нет,
+                   снимаем выделение с текущего токена.
+                   Если сосед тоже выделен, сохраняем выделение. */
+                var searchNeighborToLeft = isRightDirection;
+                var neighborIndex = _this.getAvailableTokenIndex(activeItemIndex, searchNeighborToLeft);
+                var neighborItem = selectedItems[neighborIndex];
+                var hasNoNeighbor = neighborIndex === activeItemIndex;
+                var canRemoveCurrentItem = isActive(currentItem) && (hasNoNeighbor || !isActive(neighborItem));
+                if (canRemoveCurrentItem) {
+                    _this.dispatch({
+                        type: 'SET_ACTIVE_TOKENS',
+                        payload: selectionWithoutCurrentItem(),
+                    }, _this.scrollToSelection);
+                }
+                return;
             }
+            var targetItem = selectedItems[newItemIndex];
+            var isShrinkingSelection = isActive(targetItem);
+            var nextActiveTokens = isShrinkingSelection
+                ? selectionWithoutCurrentItem()
+                : __spreadArray([targetItem], activeTokens.filter(function (item) { return !_this.isEqual(item, targetItem); }), true);
+            _this.dispatch({
+                type: 'SET_ACTIVE_TOKENS',
+                payload: nextActiveTokens,
+            }, _this.scrollToSelection);
         };
         _this.handleValueChange = function (items) {
             _this.getProps().onValueChange(items);
@@ -898,16 +949,10 @@ var TokenInput = /** @class */ (function (_super) {
             var selectedItems = _this.getProps().selectedItems;
             var step = isDirectionLeft ? -1 : +1;
             var availableIndex = startIndex + step;
-            while (_this.isTokenDisabled(availableIndex)) {
+            while (availableIndex >= 0 && availableIndex < selectedItems.length && _this.isTokenDisabled(availableIndex)) {
                 availableIndex += step;
-                if (availableIndex === selectedItems.length) {
-                    return availableIndex;
-                }
-                else if (availableIndex === -1) {
-                    return startIndex;
-                }
             }
-            return availableIndex;
+            return availableIndex < 0 ? startIndex : availableIndex;
         };
         return _this;
     }
@@ -1100,7 +1145,7 @@ var TokenInput = /** @class */ (function (_super) {
         configurable: true
     });
     TokenInput.prototype.isCursorVisibleForState = function (state) {
-        return state.inFocus && (this.isInputValueChanged || state.activeTokens.length === 0);
+        return state.inFocus && (state.editingTokenIndex > -1 || state.activeTokens.length === 0);
     };
     TokenInput.prototype.getMenuItems = function () {
         if (this.state.requestStatus === ComboBoxRequestStatus.Failed) {
@@ -1261,7 +1306,7 @@ var TokenInput = /** @class */ (function (_super) {
     TokenInput.prototype.moveFocusToLastToken = function () {
         var items = this.getProps().selectedItems;
         if (this.state.inputValue === '' && items && items.length > 0) {
-            this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: items.slice(-1) });
+            this.dispatch({ type: 'SET_ACTIVE_TOKENS', payload: items.slice(-1) }, this.scrollToSelection);
         }
     };
     var TokenInput_1;