@vkontakte/vkui 6.2.0 → 6.2.1

package/dist/vkui.js.tmp

@@ -4990,15 +4990,19 @@ var getAppearanceTokenClassNameByPlatform = function(platform, tokensClassNames)
     return tokensClassName ? tokensClassName : DEFAULT_TOKENS_CLASS_NAMES[platform][appearance];
 };
 
+;// CONCATENATED MODULE: ./src/lib/tokens/TokensClassProvider.module.css
+// extracted by mini-css-extract-plugin
+
 ;// CONCATENATED MODULE: ./src/lib/tokens/TokensClassProvider.tsx
 
 
 
+
 var InjectTokenClassNameToChild = function(param) {
     var children = param.children;
     var tokensClassName = useTokensClassName();
     return /*#__PURE__*/ React.cloneElement(children, {
-        className: classNames(tokensClassName, children.props.className)
+        className: classNames(tokensClassName, "vkuiTokensClassProvider--default-color", children.props.className)
     });
 };
 var TokensClassProvider_TokensClassProvider = function(param) {
@@ -9254,6 +9258,165 @@ function useAppearance_useAppearance() {
     return appearance !== null && appearance !== void 0 ? appearance : appearance_DEFAULT_APPEARANCE;
 }
 
+;// CONCATENATED MODULE: ./src/hooks/useFocusWithin.ts
+function useFocusWithin_array_like_to_array(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;
+}
+function useFocusWithin_array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function useFocusWithin_iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function useFocusWithin_non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function useFocusWithin_sliced_to_array(arr, i) {
+    return useFocusWithin_array_with_holes(arr) || useFocusWithin_iterable_to_array_limit(arr, i) || useFocusWithin_unsupported_iterable_to_array(arr, i) || useFocusWithin_non_iterable_rest();
+}
+function useFocusWithin_unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return useFocusWithin_array_like_to_array(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(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return useFocusWithin_array_like_to_array(o, minLen);
+}
+
+
+
+var isFocusWithin = function(ref, document) {
+    return ref.contains(document.activeElement);
+};
+function useFocusWithin_useFocusWithin(ref) {
+    var document = dom_useDOM().document;
+    var _React_useState = useFocusWithin_sliced_to_array(react.useState(function() {
+        return ref.current && document ? isFocusWithin(ref.current, document) : false;
+    }), 2), focusWithin = _React_useState[0], setFocusWithin = _React_useState[1];
+    useIsomorphicLayoutEffect_useIsomorphicLayoutEffect(function handleAutoFocus() {
+        /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */ if (!document) {
+            return;
+        }
+        var handleFocusOrBlurEvents = function() {
+            if (ref.current) {
+                setFocusWithin(isFocusWithin(ref.current, document));
+            }
+        };
+        // Вызываем в начале, чтобы проверить autoFocus
+        void handleFocusOrBlurEvents();
+        document.addEventListener('focus', handleFocusOrBlurEvents, {
+            capture: true
+        });
+        document.addEventListener('blur', handleFocusOrBlurEvents, {
+            capture: true
+        });
+        return function() {
+            document.removeEventListener('focus', handleFocusOrBlurEvents, {
+                capture: true
+            });
+            document.removeEventListener('blur', handleFocusOrBlurEvents, {
+                capture: true
+            });
+        };
+    }, []);
+    return focusWithin;
+}
+
+;// CONCATENATED MODULE: ./src/components/ImageBase/ImageBaseOverlay/hooks.ts
+function hooks_array_like_to_array(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;
+}
+function hooks_array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function hooks_iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function hooks_non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function hooks_sliced_to_array(arr, i) {
+    return hooks_array_with_holes(arr) || hooks_iterable_to_array_limit(arr, i) || hooks_unsupported_iterable_to_array(arr, i) || hooks_non_iterable_rest();
+}
+function hooks_unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return hooks_array_like_to_array(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(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return hooks_array_like_to_array(o, minLen);
+}
+
+
+
+function useNonInteractiveOverlayProps(rootRef) {
+    var focusWithin = useFocusWithin_useFocusWithin(rootRef);
+    var _React_useState = hooks_sliced_to_array(react.useState(false), 2), nonInteractiveFocusShown = _React_useState[0], setNonInteractiveFocusShown = _React_useState[1];
+    function onClick(event) {
+        if (event.detail > 0) {
+            // Если мы попали на вложенный в оверлей элемент через focus,
+            // то при клике мышкой мы должны начать реагировать на hover-состояние,
+            // даже если фокус всё ещё остался на вложенном элементе (был по нему клик)
+            setNonInteractiveFocusShown(false);
+        }
+    }
+    useIsomorphicLayoutEffect_useIsomorphicLayoutEffect(function() {
+        setNonInteractiveFocusShown(focusWithin);
+    }, [
+        focusWithin
+    ]);
+    return {
+        shown: nonInteractiveFocusShown && focusWithin,
+        onClick: onClick
+    };
+}
+
 ;// CONCATENATED MODULE: ./src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.module.css
 // extracted by mini-css-extract-plugin
 
@@ -9346,30 +9509,70 @@ function ImageBaseOverlay_object_without_properties_loose(source, excluded) {
 
 
 
+
+
+
+var ImageBaseOverlayInteractive = function(_param) {
+    var children = _param.children, className = _param.className, getRootRef = _param.getRootRef, disableInteractive = _param.disableInteractive, overlayShown = _param.overlayShown, restProps = ImageBaseOverlay_object_without_properties(_param, [
+        "children",
+        "className",
+        "getRootRef",
+        "disableInteractive",
+        "overlayShown"
+    ]);
+    var _useFocusVisible = useFocusVisible_useFocusVisible(), focusVisible = _useFocusVisible.focusVisible, focusEvents = ImageBaseOverlay_object_without_properties(_useFocusVisible, [
+        "focusVisible"
+    ]);
+    var focusVisibleClassNames = useFocusVisibleClassName_useFocusVisibleClassName({
+        focusVisible: focusVisible,
+        mode: 'inside'
+    });
+    var keyboardHandlers = useKeyboard_useKeyboard();
+    if (false) { var size; }
+    return /*#__PURE__*/ react.createElement("div", ImageBaseOverlay_object_spread(ImageBaseOverlay_object_spread_props(ImageBaseOverlay_object_spread({}, restProps), {
+        tabIndex: 0,
+        role: "button",
+        className: classNames_classNames("vkuiImageBaseOverlay--clickable", (focusVisible || overlayShown) && "vkuiImageBaseOverlay--visible", focusVisibleClassNames, className),
+        ref: getRootRef
+    }), focusEvents, keyboardHandlers), children);
+};
+var ImageBaseOverlayNonInteractive = function(_param) {
+    var className = _param.className, getRootRef = _param.getRootRef, disableInteractive = _param.disableInteractive, overlayShownProps = _param.overlayShown, restProps = ImageBaseOverlay_object_without_properties(_param, [
+        "className",
+        "getRootRef",
+        "disableInteractive",
+        "overlayShown"
+    ]);
+    var rootRef = useExternRef_useExternRef(getRootRef);
+    var _useNonInteractiveOverlayProps = useNonInteractiveOverlayProps(rootRef), overlayShown = _useNonInteractiveOverlayProps.shown, onOverlayClick = _useNonInteractiveOverlayProps.onClick;
+    return /*#__PURE__*/ react.createElement("div", ImageBaseOverlay_object_spread_props(ImageBaseOverlay_object_spread({}, restProps), {
+        ref: rootRef,
+        className: classNames_classNames((overlayShown || overlayShownProps) && "vkuiImageBaseOverlay--visible", className),
+        onClick: onOverlayClick
+    }));
+};
 /**
- * Интерактивный оверлей над картинкой.
+ * Оверлей над картинкой.
  */ var ImageBaseOverlay = function(_param) {
-    var className = _param.className, themeProp = _param.theme, visibilityProp = _param.visibility, children = _param.children, onClickProp = _param.onClick, restProps = ImageBaseOverlay_object_without_properties(_param, [
+    var className = _param.className, themeProp = _param.theme, visibilityProp = _param.visibility, restProps = ImageBaseOverlay_object_without_properties(_param, [
         "className",
         "theme",
-        "visibility",
-        "children",
-        "onClick"
+        "visibility"
     ]);
     var appearance = useAppearance_useAppearance();
     var hasPointer = useAdaptivityHasPointer_useAdaptivityHasPointer();
     var theme = themeProp !== null && themeProp !== void 0 ? themeProp : appearance;
     var visibility = visibilityProp !== null && visibilityProp !== void 0 ? visibilityProp : hasPointer ? 'on-hover' : 'always';
-    if (false) { var size; }
-    var onClick = (onClickProp !== null && onClickProp !== void 0 ? onClickProp : visibility === 'on-hover') ? functions_noop : undefined;
-    return /*#__PURE__*/ react.createElement(Tappable_Tappable, ImageBaseOverlay_object_spread_props(ImageBaseOverlay_object_spread({}, restProps), {
-        className: classNames_classNames("vkuiImageBaseOverlay", visibility === 'always' && "vkuiImageBaseOverlay--visible", theme === 'light' && "vkuiImageBaseOverlay--theme-light", theme === 'dark' && "vkuiImageBaseOverlay--theme-dark", className),
-        hasHover: visibility === 'on-hover',
-        hoverMode: visibility === 'on-hover' ? "vkuiImageBaseOverlay--visible" : undefined,
-        focusVisibleMode: classNames_classNames(focusVisiblePresetModeClassNames['inside'], "vkuiImageBaseOverlay--visible"),
-        hasActive: false,
-        onClick: onClick
-    }), children);
+    var commonClassNames = classNames_classNames("vkuiImageBaseOverlay", theme === 'light' && "vkuiImageBaseOverlay--theme-light", theme === 'dark' && "vkuiImageBaseOverlay--theme-dark", className);
+    var commonProps = {
+        className: commonClassNames,
+        overlayShown: visibility === 'always'
+    };
+    // Не делаем деструктуризацию пропа, потому что Typescript не вывозит
+    if (restProps.disableInteractive) {
+        return /*#__PURE__*/ react.createElement(ImageBaseOverlayNonInteractive, ImageBaseOverlay_object_spread({}, restProps, commonProps));
+    }
+    return /*#__PURE__*/ react.createElement(ImageBaseOverlayInteractive, ImageBaseOverlay_object_spread({}, restProps, commonProps));
 };
 ImageBaseOverlay.displayName = 'ImageBaseOverlay';
 
@@ -12582,7 +12785,7 @@ function useEnsuredControl_useCustomEnsuredControl(param) {
     var value = param.value, defaultValue = param.defaultValue, disabled = param.disabled, onChangeProp = param.onChange;
     var isControlled = value !== undefined;
     var _React_useState = useEnsuredControl_sliced_to_array(react.useState(defaultValue), 2), localValue = _React_useState[0], setLocalValue = _React_useState[1];
-    var preservedControlledValueRef = react.useRef();
+    var preservedControlledValueRef = react.useRef(value);
     useIsomorphicLayoutEffect_useIsomorphicLayoutEffect(function() {
         preservedControlledValueRef.current = value;
     });
@@ -19542,93 +19745,6 @@ function ScreenSpinner_object_without_properties_loose(source, excluded) {
     }, /*#__PURE__*/ React.createElement(Icon, null))));
 };
 
-;// CONCATENATED MODULE: ./src/hooks/useFocusWithin.ts
-function useFocusWithin_array_like_to_array(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;
-}
-function useFocusWithin_array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function useFocusWithin_iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function useFocusWithin_non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function useFocusWithin_sliced_to_array(arr, i) {
-    return useFocusWithin_array_with_holes(arr) || useFocusWithin_iterable_to_array_limit(arr, i) || useFocusWithin_unsupported_iterable_to_array(arr, i) || useFocusWithin_non_iterable_rest();
-}
-function useFocusWithin_unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return useFocusWithin_array_like_to_array(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(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return useFocusWithin_array_like_to_array(o, minLen);
-}
-
-
-
-var isFocusWithin = function(ref, document) {
-    return ref.contains(document.activeElement);
-};
-function useFocusWithin_useFocusWithin(ref) {
-    var document = dom_useDOM().document;
-    var _React_useState = useFocusWithin_sliced_to_array(react.useState(function() {
-        return ref.current && document ? isFocusWithin(ref.current, document) : false;
-    }), 2), focusWithin = _React_useState[0], setFocusWithin = _React_useState[1];
-    useIsomorphicLayoutEffect_useIsomorphicLayoutEffect(function handleAutoFocus() {
-        /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */ if (!document) {
-            return;
-        }
-        var handleFocusOrBlurEvents = function() {
-            if (ref.current) {
-                setFocusWithin(isFocusWithin(ref.current, document));
-            }
-        };
-        // Вызываем в начале, чтобы проверить autoFocus
-        void handleFocusOrBlurEvents();
-        document.addEventListener('focus', handleFocusOrBlurEvents, {
-            capture: true
-        });
-        document.addEventListener('blur', handleFocusOrBlurEvents, {
-            capture: true
-        });
-        return function() {
-            document.removeEventListener('focus', handleFocusOrBlurEvents, {
-                capture: true
-            });
-            document.removeEventListener('blur', handleFocusOrBlurEvents, {
-                capture: true
-            });
-        };
-    }, []);
-    return focusWithin;
-}
-
 ;// CONCATENATED MODULE: ./src/hooks/useGlobalEscKeyDown.ts
 
 
@@ -29070,7 +29186,7 @@ var GridAvatar_warn = warnOnce('GridAvatar');
         "aria-hidden": true
     }, src.map(function(url, index) {
         return index < MAX_GRID_LENGTH ? /*#__PURE__*/ React.createElement("div", {
-            key: url,
+            key: index,
             className: "vkuiGridAvatar__item",
             style: {
                 backgroundImage: "url(".concat(url, ")")
@@ -35206,12 +35322,11 @@ function constants_getNewOptionDataDefault(value, label) {
     };
 }
 function constants_renderChipDefault(props) {
-    var disabled = props.disabled, label = props.label, rest = constants_object_without_properties(props, [
-        "disabled",
+    var label = props.label, rest = constants_object_without_properties(props, [
         "label"
     ]);
     return /*#__PURE__*/ React.createElement(Chip, constants_object_spread({
-        removable: !disabled
+        removable: !props.disabled
     }, rest), label);
 }
 
@@ -35573,8 +35688,8 @@ var ChipsInputBase_ChipsInputBase = function(_param) {
             'Component': 'div',
             'value': option.value,
             'label': option.label,
-            'disabled': disabled,
-            'readOnly': readOnly,
+            'disabled': option.disabled || disabled,
+            'readOnly': option.readOnly || readOnly,
             'className': "vkuiChipsInputBase__chip",
             'onRemove': handleChipRemove,
             // чтобы можно было легче найти этот чип в DOM
@@ -39632,7 +39747,7 @@ var CustomSelect_defaultOptions = (/* unused pure expression or super */ null &&
     var scrollToElement = React.useCallback(function(index) {
         var center = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
         var dropdown = scrollBoxRef.current;
-        var item = dropdown ? dropdown.children[index] : null;
+        var item = dropdown && dropdown.firstElementChild ? dropdown.firstElementChild.children[index] : null;
         if (!item || !dropdown) {
             return;
         }
@@ -39925,11 +40040,10 @@ var CustomSelect_defaultOptions = (/* unused pure expression or super */ null &&
         x: 0,
         y: 0
     });
-    var focusOptionOnMouseMove = React.useCallback(function(e) {
+    var focusOptionOnMouseMove = React.useCallback(function(e, index) {
         var isMouseChangedPosition = Math.abs(prevMousePositionRef.current.x - e.clientX) >= 1 || Math.abs(prevMousePositionRef.current.y - e.clientY) >= 1;
         if (isMouseChangedPosition) {
-            var _e_currentTarget_parentNode;
-            focusOptionByIndex(Array.prototype.indexOf.call((_e_currentTarget_parentNode = e.currentTarget.parentNode) === null || _e_currentTarget_parentNode === void 0 ? void 0 : _e_currentTarget_parentNode.children, e.currentTarget), false);
+            focusOptionByIndex(index, false);
         }
         prevMousePositionRef.current = {
             x: e.clientX,
@@ -39959,7 +40073,9 @@ var CustomSelect_defaultOptions = (/* unused pure expression or super */ null &&
             // Причём координаты события меняются на пару пикселей по сравнению с прошлым вызовом,
             // а значит нельзя на них опираться, чтобы запретить обработку такого события.
             // C mousemove такой проблемы нет, что позволяет реализовать поведение при наведении с клавиатуры и при наведении мышью идентично `<select>`.
-            onMouseMove: focusOptionOnMouseMove,
+            onMouseMove: function(e) {
+                return focusOptionOnMouseMove(e, index);
+            },
             id: "".concat(popupAriaId, "-").concat(option.value)
         }));
     }, [
@@ -45233,7 +45349,7 @@ function Popover_unsupported_iterable_to_array(o, minLen) {
  * @see https://vkcom.github.io/VKUI/#/Popover
  */ var Popover = function(_param) {
     var // UsePopoverProps
-    withArrow = _param.arrow, _param_arrowHeight = _param.arrowHeight, arrowHeight = _param_arrowHeight === void 0 ? DEFAULT_ARROW_HEIGHT : _param_arrowHeight, _param_arrowPadding = _param.arrowPadding, arrowPadding = _param_arrowPadding === void 0 ? DEFAULT_ARROW_PADDING : _param_arrowPadding, tmp = _param.placement, expectedPlacement = tmp === void 0 ? 'bottom-start' : tmp, onPlacementChange = _param.onPlacementChange, _param_disableFlipMiddleware = _param.disableFlipMiddleware, disableFlipMiddleware = _param_disableFlipMiddleware === void 0 ? false : _param_disableFlipMiddleware, _param_trigger = _param.trigger, trigger = _param_trigger === void 0 ? 'click' : _param_trigger, content = _param.content, _param_hoverDelay = _param.hoverDelay, hoverDelay = _param_hoverDelay === void 0 ? 150 : _param_hoverDelay, closeAfterClick = _param.closeAfterClick, _param_offsetByMainAxis = _param.offsetByMainAxis, offsetByMainAxis = _param_offsetByMainAxis === void 0 ? 8 : _param_offsetByMainAxis, _param_offsetByCrossAxis = _param.offsetByCrossAxis, offsetByCrossAxis = _param_offsetByCrossAxis === void 0 ? 0 : _param_offsetByCrossAxis, sameWidth = _param.sameWidth, hideWhenReferenceHidden = _param.hideWhenReferenceHidden, disabled = _param.disabled, disableInteractive = _param.disableInteractive, disableCloseOnClickOutside = _param.disableCloseOnClickOutside, disableCloseOnEscKey = _param.disableCloseOnEscKey, _param_keepMounted = _param.keepMounted, keepMounted = _param_keepMounted === void 0 ? false : _param_keepMounted, _param_defaultShown = _param.// uncontrolled
+    withArrow = _param.arrow, _param_arrowHeight = _param.arrowHeight, arrowHeight = _param_arrowHeight === void 0 ? DEFAULT_ARROW_HEIGHT : _param_arrowHeight, _param_arrowPadding = _param.arrowPadding, arrowPadding = _param_arrowPadding === void 0 ? DEFAULT_ARROW_PADDING : _param_arrowPadding, tmp = _param.placement, expectedPlacement = tmp === void 0 ? 'bottom-start' : tmp, onPlacementChange = _param.onPlacementChange, _param_disableFlipMiddleware = _param.disableFlipMiddleware, disableFlipMiddleware = _param_disableFlipMiddleware === void 0 ? false : _param_disableFlipMiddleware, _param_trigger = _param.trigger, trigger = _param_trigger === void 0 ? 'click' : _param_trigger, content = _param.content, _param_hoverDelay = _param.hoverDelay, hoverDelay = _param_hoverDelay === void 0 ? 150 : _param_hoverDelay, closeAfterClick = _param.closeAfterClick, _param_offsetByMainAxis = _param.offsetByMainAxis, offsetByMainAxis = _param_offsetByMainAxis === void 0 ? 8 : _param_offsetByMainAxis, _param_offsetByCrossAxis = _param.offsetByCrossAxis, offsetByCrossAxis = _param_offsetByCrossAxis === void 0 ? 0 : _param_offsetByCrossAxis, sameWidth = _param.sameWidth, hideWhenReferenceHidden = _param.hideWhenReferenceHidden, disabled = _param.disabled, disableInteractive = _param.disableInteractive, disableCloseOnClickOutside = _param.disableCloseOnClickOutside, disableCloseOnEscKey = _param.disableCloseOnEscKey, _param_keepMounted = _param.keepMounted, keepMounted = _param_keepMounted === void 0 ? false : _param_keepMounted, customMiddlewares = _param.customMiddlewares, _param_defaultShown = _param.// uncontrolled
     defaultShown, defaultShown = _param_defaultShown === void 0 ? false : _param_defaultShown, // controlled
     shownProp = _param.shown, onShownChange = _param.onShownChange, _param_usePortal = _param.// Для AppRootPortal
     usePortal, usePortal = _param_usePortal === void 0 ? true : _param_usePortal, // Для FloatingArrow
@@ -45259,6 +45375,7 @@ function Popover_unsupported_iterable_to_array(o, minLen) {
         "disableCloseOnClickOutside",
         "disableCloseOnEscKey",
         "keepMounted",
+        "customMiddlewares",
         "defaultShown",
         "shown",
         "onShownChange",
@@ -45284,7 +45401,8 @@ function Popover_unsupported_iterable_to_array(o, minLen) {
         offsetByCrossAxis: offsetByCrossAxis,
         sameWidth: sameWidth,
         hideWhenReferenceHidden: hideWhenReferenceHidden,
-        disableFlipMiddleware: disableFlipMiddleware
+        disableFlipMiddleware: disableFlipMiddleware,
+        customMiddlewares: customMiddlewares
     }), middlewares = _useFloatingMiddlewaresBootstrap.middlewares, strictPlacement = _useFloatingMiddlewaresBootstrap.strictPlacement;
     var _useFloatingWithInteractions = useFloatingWithInteractions({
         middlewares: middlewares,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.2.0",
+  "version": "6.2.1",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "main": "dist/cjs/index.js",

package/src/components/ChipsInputBase/ChipsInputBase.tsx

@@ -222,8 +222,8 @@ export const ChipsInputBase = <O extends ChipOption>({
                 'Component': 'div',
                 'value': option.value,
                 'label': option.label,
-                'disabled': disabled,
-                'readOnly': readOnly,
+                'disabled': option.disabled || disabled,
+                'readOnly': option.readOnly || readOnly,
                 'className': styles['ChipsInputBase__chip'],
                 'onRemove': handleChipRemove,
                 // чтобы можно было легче найти этот чип в DOM

package/src/components/ChipsInputBase/constants.tsx

@@ -26,9 +26,9 @@ export function getNewOptionDataDefault<O extends ChipOption>(
 }
 
 export function renderChipDefault(props: RenderChipProps): React.ReactNode {
-  const { disabled, label, ...rest } = props;
+  const { label, ...rest } = props;
   return (
-    <Chip removable={!disabled} {...rest}>
+    <Chip removable={!props.disabled} {...rest}>
       {label}
     </Chip>
   );

package/src/components/CustomScrollView/CustomScrollView.module.css

@@ -17,6 +17,8 @@
 
 .CustomScrollView__box-content {
   position: relative;
+  inline-size: 100%;
+  block-size: 100%;
 }
 
 .CustomScrollView__barY:active + .CustomScrollView__box {

package/src/components/CustomSelect/CustomSelect.tsx

@@ -321,7 +321,10 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
 
   const scrollToElement = React.useCallback((index: number, center = false) => {
     const dropdown = scrollBoxRef.current;
-    const item = dropdown ? (dropdown.children[index] as HTMLElement) : null;
+    const item =
+      dropdown && dropdown.firstElementChild
+        ? (dropdown.firstElementChild.children[index] as HTMLElement)
+        : null;
 
     if (!item || !dropdown) {
       return;
@@ -632,16 +635,13 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     y: React.MouseEvent['clientY'];
   }>({ x: 0, y: 0 });
   const focusOptionOnMouseMove = React.useCallback(
-    (e: React.MouseEvent<HTMLElement>) => {
+    (e: React.MouseEvent<HTMLElement>, index: number) => {
       const isMouseChangedPosition =
         Math.abs(prevMousePositionRef.current.x - e.clientX) >= 1 ||
         Math.abs(prevMousePositionRef.current.y - e.clientY) >= 1;
 
       if (isMouseChangedPosition) {
-        focusOptionByIndex(
-          Array.prototype.indexOf.call(e.currentTarget.parentNode?.children, e.currentTarget),
-          false,
-        );
+        focusOptionByIndex(index, false);
       }
 
       prevMousePositionRef.current = { x: e.clientX, y: e.clientY };
@@ -672,7 +672,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
             // Причём координаты события меняются на пару пикселей по сравнению с прошлым вызовом,
             // а значит нельзя на них опираться, чтобы запретить обработку такого события.
             // C mousemove такой проблемы нет, что позволяет реализовать поведение при наведении с клавиатуры и при наведении мышью идентично `<select>`.
-            onMouseMove: focusOptionOnMouseMove,
+            onMouseMove: (e) => focusOptionOnMouseMove(e, index),
             id: `${popupAriaId}-${option.value}`,
           })}
         </React.Fragment>

package/src/components/CustomSelectOption/CustomSelectOption.module.css

@@ -52,6 +52,7 @@
 
 .CustomSelectOption__children {
   min-inline-size: 0;
+  word-break: break-word;
 }
 
 .CustomSelectOption__after {

package/src/components/GridAvatar/GridAvatar.tsx

@@ -41,7 +41,7 @@ export const GridAvatar = ({
         {src.map((url, index) =>
           index < MAX_GRID_LENGTH ? (
             <div
-              key={url}
+              key={index}
               className={styles['GridAvatar__item']}
               style={{ backgroundImage: `url(${url})` }}
             />

package/src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.module.css

@@ -20,6 +20,16 @@
   opacity: 1;
 }
 
+@media (--hover-has) {
+  .ImageBaseOverlay:hover {
+    opacity: 1;
+  }
+}
+
+.ImageBaseOverlay--clickable {
+  cursor: pointer;
+}
+
 .ImageBaseOverlay--theme-light {
   color: var(--vkui--color_icon_accent);
   background-color: var(--vkui--color_avatar_overlay_inverse_alpha);