@vkontakte/vkui 6.2.0 → 6.2.2

package/dist/vkui.js.tmp

@@ -4912,15 +4912,15 @@ function browser_computeBrowserInfo() {
  * Эмуляция функции `window.matchMedia` для SSR.
  *
  * ⚠️ Желательно избегать использование этой эмуляции в SSR.
- */ function browser_mediaQueryNull(query) {
+ */ function mediaQueryNull(query) {
     return {
         matches: false,
         media: query,
-        onchange: noop,
-        addListener: noop,
-        removeListener: noop,
-        addEventListener: noop,
-        removeEventListener: noop,
+        onchange: functions_noop,
+        addListener: functions_noop,
+        removeListener: functions_noop,
+        addEventListener: functions_noop,
+        removeEventListener: functions_noop,
         dispatchEvent: function dispatchEvent() {
             return false;
         }
@@ -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;
     });
@@ -12924,22 +13127,26 @@ var whileElementsMounted = function() {
         blockMouseEnterRef.current = true;
         commitShownLocalState(false, 'click');
     });
-    var handleMouseEnterOnBoth = useStableCallback(function() {
+    var handleMouseEnterOnBoth = useStableCallback(function(event) {
+        if (willBeHide && event.currentTarget === refs.floating.current) {
+            return;
+        }
         showWithDelay.cancel();
         hideWithDelay.cancel();
         if (!blockMouseEnterRef.current && !shownLocalState.shown) {
             showWithDelay();
         }
     });
-    var handleMouseLeaveOnBothForHoverAndFocusStates = useStableCallback(function() {
+    var handleMouseLeaveOnBothForHoverAndFocusStates = useStableCallback(function(event) {
+        if (willBeHide && event.currentTarget === refs.floating.current) {
+            return;
+        }
         blockFocusRef.current = false;
         blockMouseEnterRef.current = false;
         if (triggerOnHover) {
             showWithDelay.cancel();
             hideWithDelay.cancel();
-            if (shownLocalState.reason !== 'focus' && shownLocalState.reason !== 'click') {
-                hideWithDelay();
-            }
+            hideWithDelay();
         }
     });
     var handleFloatingAnimationStart = function() {
@@ -14818,7 +15025,7 @@ var PanelHeaderContext_sizeXClassNames = {
     var platform = usePlatform();
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeX = _useAdaptivity.sizeX, sizeX = _useAdaptivity_sizeX === void 0 ? 'none' : _useAdaptivity_sizeX;
     var elementRef = React.useRef(null);
-    var _useCSSKeyframesAnimationController = PanelHeaderContext_sliced_to_array(useCSSKeyframesAnimationController(opened ? 'enter' : 'exit'), 2), animationState = _useCSSKeyframesAnimationController[0], animationHandlers = _useCSSKeyframesAnimationController[1];
+    var _useCSSKeyframesAnimationController = PanelHeaderContext_sliced_to_array(useCSSKeyframesAnimationController(opened ? 'enter' : 'exit', undefined, true), 2), animationState = _useCSSKeyframesAnimationController[0], animationHandlers = _useCSSKeyframesAnimationController[1];
     var visible = animationState !== 'exited';
     useScrollLock(platform !== 'vkcom' && visible);
     var handleGlobalOnClickOutside = React.useCallback(function(event) {
@@ -15233,20 +15440,20 @@ function SplitLayout_object_without_properties_loose(source, excluded) {
 var mediaQueriesCache = new WeakMap();
 function getMediaQueries(matchMedia) {
     return {
-        desktopPlus: matchMedia(MEDIA_QUERIES.DESKTOP_PLUS),
-        smallTabletPlus: matchMedia(MEDIA_QUERIES.SMALL_TABLET_PLUS),
-        tablet: matchMedia(MEDIA_QUERIES.TABLET),
-        smallTablet: matchMedia(MEDIA_QUERIES.SMALL_TABLET),
-        mobile: matchMedia(MEDIA_QUERIES.MOBILE),
-        mediumHeight: matchMedia(MEDIA_QUERIES.MEDIUM_HEIGHT),
-        mobileLandscapeHeight: matchMedia(MEDIA_QUERIES.MOBILE_LANDSCAPE_HEIGHT)
+        desktopPlus: matchMedia(breakpoints.MEDIA_QUERIES.DESKTOP_PLUS),
+        smallTabletPlus: matchMedia(breakpoints.MEDIA_QUERIES.SMALL_TABLET_PLUS),
+        tablet: matchMedia(breakpoints.MEDIA_QUERIES.TABLET),
+        smallTablet: matchMedia(breakpoints.MEDIA_QUERIES.SMALL_TABLET),
+        mobile: matchMedia(breakpoints.MEDIA_QUERIES.MOBILE),
+        mediumHeight: matchMedia(breakpoints.MEDIA_QUERIES.MEDIUM_HEIGHT),
+        mobileLandscapeHeight: matchMedia(breakpoints.MEDIA_QUERIES.MOBILE_LANDSCAPE_HEIGHT)
     };
 }
 /**
  * Возвращает медиа выражения определенные дизайн-системой.
  */ var useMediaQueries_useMediaQueries = function() {
-    var window = useDOM().window;
-    return React.useMemo(function initializeStoreOrUpdateStoreIfWindowChanges() {
+    var window = dom_useDOM().window;
+    return react.useMemo(function initializeStoreOrUpdateStoreIfWindowChanges() {
         if (!window) {
             return getMediaQueries(mediaQueryNull);
         }
@@ -17140,6 +17347,18 @@ function useAdaptivityWithJSMediaQueries_unsupported_iterable_to_array(o, minLen
     return adaptivityProps;
 };
 
+;// CONCATENATED MODULE: ./src/helpers/array.ts
+/**
+ * Сравнивает два массива
+ */ function arraysEquals(arrA, arrB) {
+    if (arrA.length !== arrB.length) {
+        return false;
+    }
+    return arrA.every(function(item, index) {
+        return item === arrB[index];
+    });
+}
+
 ;// CONCATENATED MODULE: ./src/components/FocusTrap/FocusTrap.tsx
 function FocusTrap_array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -17149,6 +17368,9 @@ function FocusTrap_array_like_to_array(arr, len) {
 function FocusTrap_array_with_holes(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function FocusTrap_array_without_holes(arr) {
+    if (Array.isArray(arr)) return FocusTrap_array_like_to_array(arr);
+}
 function FocusTrap_define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -17162,6 +17384,9 @@ function FocusTrap_define_property(obj, key, value) {
     }
     return obj;
 }
+function FocusTrap_iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
 function FocusTrap_iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -17189,6 +17414,9 @@ function FocusTrap_iterable_to_array_limit(arr, i) {
 function FocusTrap_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 FocusTrap_non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function FocusTrap_object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -17234,6 +17462,9 @@ function FocusTrap_object_without_properties_loose(source, excluded) {
 function FocusTrap_sliced_to_array(arr, i) {
     return FocusTrap_array_with_holes(arr) || FocusTrap_iterable_to_array_limit(arr, i) || FocusTrap_unsupported_iterable_to_array(arr, i) || FocusTrap_non_iterable_rest();
 }
+function FocusTrap_to_consumable_array(arr) {
+    return FocusTrap_array_without_holes(arr) || FocusTrap_iterable_to_array(arr) || FocusTrap_unsupported_iterable_to_array(arr) || FocusTrap_non_iterable_spread();
+}
 function FocusTrap_unsupported_iterable_to_array(o, minLen) {
     if (!o) return;
     if (typeof o === "string") return FocusTrap_array_like_to_array(o, minLen);
@@ -17247,6 +17478,7 @@ function FocusTrap_unsupported_iterable_to_array(o, minLen) {
 
 
 
+
 var FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS_LIST.join();
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusTrap
@@ -17269,7 +17501,9 @@ var FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS_LIST.join();
     var focusNodeByIndex = function(nodeIndex) {
         var element = focusableNodesRef.current[nodeIndex];
         if (element) {
-            element.focus();
+            element.focus({
+                preventScroll: true
+            });
         }
     };
     var recalculateFocusableNodesRef = function(parentNode) {
@@ -17289,7 +17523,11 @@ var FOCUSABLE_ELEMENTS = FOCUSABLE_ELEMENTS_LIST.join();
         focusableNodesRef.current = nodes;
     };
     var onMutateParentHandler = function(parentNode) {
+        var oldFocusableNodes = FocusTrap_to_consumable_array(focusableNodesRef.current);
         recalculateFocusableNodesRef(parentNode);
+        if (arraysEquals(oldFocusableNodes, focusableNodesRef.current)) {
+            return;
+        }
         if (document) {
             var activeElement = document.activeElement;
             var currentElementIndex = Math.max(document.activeElement ? focusableNodesRef.current.indexOf(activeElement) : -1, 0);
@@ -19542,93 +19780,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
 
 
@@ -19845,6 +19996,7 @@ function utils_object_spread_props(target, source) {
     return target;
 }
 
+
 function resolveOffsetYCssStyle(placement, style, offsetY) {
     if (offsetY === undefined) {
         return style;
@@ -19864,9 +20016,10 @@ function resolveOffsetYCssStyle(placement, style, offsetY) {
             });
     }
 }
-function getInitialShiftData(width, height) {
+function getInitialShiftData(width, height, mediaQueries) {
     return {
         shifted: false,
+        isDesktop: mediaQueries.smallTabletPlus.matches,
         x: 0,
         y: 0,
         width: width,
@@ -19874,27 +20027,20 @@ function getInitialShiftData(width, height) {
     };
 }
 function getMovedShiftData(placement, shiftData, nextShift) {
-    switch(placement){
-        case 'top-start':
-        case 'bottom-start':
+    /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */ if (shiftData.isDesktop) {
+        if (placement.endsWith('start')) {
             shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);
-            break;
-        case 'top-end':
-        case 'bottom-end':
+        } else if (placement.endsWith('end')) {
             shiftData.x = rubberbandIfOutOfBounds(nextShift.x, 0, shiftData.width);
-            break;
-    }
-    switch(placement){
-        case 'top-start':
-        case 'top':
-        case 'top-end':
-            shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);
-            break;
-        case 'bottom-start':
-        case 'bottom':
-        case 'bottom-end':
+        }
+        if (placement.startsWith('bottom')) {
             shiftData.y = rubberbandIfOutOfBounds(nextShift.y, 0, shiftData.height);
-            break;
+        }
+    } else if (placement.startsWith('bottom')) {
+        shiftData.x = rubberbandIfOutOfBounds(nextShift.x, -shiftData.width, 0);
+    }
+    if (placement.startsWith('top')) {
+        shiftData.y = rubberbandIfOutOfBounds(nextShift.y, -shiftData.height, 0);
     }
     shiftData.shifted = true;
     return shiftData;
@@ -19912,31 +20058,25 @@ function shouldBeClosedByShiftData(placement, shiftData, relativeClientRect, vel
         x: false,
         y: false
     };
-    switch(placement){
-        case 'top-start':
-        case 'bottom-start':
+    /* istanbul ignore else: TODO чтобы протестировать кейс в блоке else, нужно мокать useMediaQueries(), чтобы перебивать mediaQueries.smallTabletPlus.matches */ if (shiftData.isDesktop) {
+        if (placement.endsWith('start')) {
             shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;
-            shouldBeClosedByVelocity.x = velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;
-            break;
-        case 'top-end':
-        case 'bottom-end':
+            shouldBeClosedByVelocity.x = relativeClientRect.x < 0 ? velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;
+        } else if (placement.endsWith('end')) {
             shouldBeClosedThreshold.x = relativeClientRect.x > relativeClientRect.width / 2;
-            shouldBeClosedByVelocity.x = velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;
-            break;
-    }
-    switch(placement){
-        case 'top-start':
-        case 'top':
-        case 'top-end':
-            shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;
-            shouldBeClosedByVelocity.y = velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;
-            break;
-        case 'bottom-start':
-        case 'bottom':
-        case 'bottom-end':
+            shouldBeClosedByVelocity.x = relativeClientRect.x > 0 ? velocity.x > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;
+        }
+        if (placement.startsWith('bottom')) {
             shouldBeClosedThreshold.y = relativeClientRect.y > relativeClientRect.height / 2;
-            shouldBeClosedByVelocity.y = velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE;
-            break;
+            shouldBeClosedByVelocity.y = relativeClientRect.y > 0 ? velocity.y > MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;
+        }
+    } else if (placement.startsWith('bottom')) {
+        shouldBeClosedThreshold.x = relativeClientRect.x < -relativeClientRect.width / 2;
+        shouldBeClosedByVelocity.x = relativeClientRect.x < 0 ? velocity.x < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;
+    }
+    if (placement.startsWith('top')) {
+        shouldBeClosedThreshold.y = relativeClientRect.y < -relativeClientRect.height / 2;
+        shouldBeClosedByVelocity.y = relativeClientRect.y < 0 ? velocity.y < -MINIMUM_PAN_GESTURE_FOR_TRIGGER_CLOSE : false;
     }
     return shouldBeClosedThreshold.x || shouldBeClosedByVelocity.x || shouldBeClosedThreshold.y || /* istanbul ignore next: подсвечивает жёлтым и пишет "branch not covered" */ shouldBeClosedByVelocity.y;
 }
@@ -20085,6 +20225,7 @@ function Snackbar_unsupported_iterable_to_array(o, minLen) {
 
 
 
+
 var Snackbar_placementClassNames = {
     'top-start': "vkuiSnackbar--placement-top-start",
     'top': "vkuiSnackbar--placement-top",
@@ -20130,6 +20271,7 @@ var animationStateClassNames = {
     var shiftDataRef = react.useRef(null);
     var rafRef = react.useRef(null);
     var closeTimeoutIdRef = react.useRef();
+    var mediaQueries = useMediaQueries_useMediaQueries();
     var _useCSSKeyframesAnimationController = Snackbar_sliced_to_array(useCSSKeyframesAnimationController_useCSSKeyframesAnimationController(open ? 'enter' : 'exit', {
         onExited: onClose
     }), 2), animationState = _useCSSKeyframesAnimationController[0], animationHandlers = _useCSSKeyframesAnimationController[1];
@@ -20161,7 +20303,7 @@ var animationStateClassNames = {
     var handleTouchStart = function(event) {
         panGestureRecognizer.current = new UIPanGestureRecognizer();
         panGestureRecognizer.current.setStartCoords(event.nativeEvent);
-        shiftDataRef.current = getInitialShiftData(rootRef.current.offsetWidth, rootRef.current.offsetHeight);
+        shiftDataRef.current = getInitialShiftData(rootRef.current.offsetWidth, rootRef.current.offsetHeight, mediaQueries);
         setTouched(true);
     };
     var handleTouchMove = function(event) {
@@ -29070,7 +29212,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 +35348,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);
 }
 
@@ -35540,9 +35681,7 @@ var ChipsInputBase_ChipsInputBase = function(_param) {
         if (contains(event.currentTarget, getActiveElementByAnotherElement(event.currentTarget))) {
             return;
         }
-        if (valueLength > 0 && listboxRef.current) {
-            moveFocusToChipOption(0, 'first', listboxRef.current);
-        } else if (inputRef.current) {
+        if (inputRef.current) {
             inputRef.current.focus();
         }
     };
@@ -35573,8 +35712,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
@@ -38877,6 +39016,9 @@ function Checkbox_object_without_properties_loose(source, excluded) {
 
 
 
+function setIndeterminate(el, indeterminate) {
+    el.indeterminate = indeterminate;
+}
 var Checkbox_sizeYClassNames = Checkbox_define_property({
     none: "vkuiCheckbox--sizeY-none"
 }, 'compact', "vkuiCheckbox--sizeY-compact");
@@ -38906,9 +39048,9 @@ var Checkbox_warn = warnOnce('Checkbox');
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? 'none' : _useAdaptivity_sizeY;
     var _useAdaptivityConditionalRender = useAdaptivityConditionalRender(), adaptiveSizeY = _useAdaptivityConditionalRender.sizeY;
     React.useEffect(function() {
-        var indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;
+        var indeterminateValue = indeterminate !== null && indeterminate !== void 0 ? indeterminate : Boolean(defaultIndeterminate);
         if (inputRef.current) {
-            inputRef.current.indeterminate = Boolean(indeterminateValue);
+            setIndeterminate(inputRef.current, indeterminateValue);
         }
     }, [
         defaultIndeterminate,
@@ -38916,19 +39058,18 @@ var Checkbox_warn = warnOnce('Checkbox');
         inputRef
     ]);
     var handleChange = React.useCallback(function(event) {
-        if (defaultIndeterminate !== undefined && indeterminate === undefined && restProps.checked === undefined && inputRef.current) {
-            inputRef.current.indeterminate = false;
+        if (defaultIndeterminate !== undefined && indeterminate === undefined && restProps.checked === undefined) {
+            event.currentTarget.indeterminate = false;
         }
-        if (indeterminate !== undefined && inputRef.current) {
-            inputRef.current.indeterminate = indeterminate;
+        if (indeterminate !== undefined) {
+            event.currentTarget.indeterminate = indeterminate;
         }
         onChange && onChange(event);
     }, [
         defaultIndeterminate,
         indeterminate,
         restProps.checked,
-        onChange,
-        inputRef
+        onChange
     ]);
     if (false) {}
     return /*#__PURE__*/ React.createElement(Tappable, {
@@ -39632,7 +39773,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 +40066,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 +40099,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 +45375,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 +45401,7 @@ function Popover_unsupported_iterable_to_array(o, minLen) {
         "disableCloseOnClickOutside",
         "disableCloseOnEscKey",
         "keepMounted",
+        "customMiddlewares",
         "defaultShown",
         "shown",
         "onShownChange",
@@ -45284,7 +45427,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,