@vkontakte/vkui 6.2.1 → 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;
         }
@@ -13127,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() {
@@ -15021,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) {
@@ -15436,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);
         }
@@ -17343,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;
@@ -17352,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, {
@@ -17365,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;
@@ -17392,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] : {};
@@ -17437,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);
@@ -17450,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
@@ -17472,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) {
@@ -17492,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);
@@ -19961,6 +19996,7 @@ function utils_object_spread_props(target, source) {
     return target;
 }
 
+
 function resolveOffsetYCssStyle(placement, style, offsetY) {
     if (offsetY === undefined) {
         return style;
@@ -19980,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,
@@ -19990,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;
@@ -20028,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;
 }
@@ -20201,6 +20225,7 @@ function Snackbar_unsupported_iterable_to_array(o, minLen) {
 
 
 
+
 var Snackbar_placementClassNames = {
     'top-start': "vkuiSnackbar--placement-top-start",
     'top': "vkuiSnackbar--placement-top",
@@ -20246,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];
@@ -20277,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) {
@@ -35655,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();
         }
     };
@@ -38992,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");
@@ -39021,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,
@@ -39031,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, {

package/package.json

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

package/src/components/Checkbox/Checkbox.tsx

@@ -20,6 +20,10 @@ import { Text } from '../Typography/Text/Text';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './Checkbox.module.css';
 
+function setIndeterminate(el: HTMLInputElement, indeterminate: boolean) {
+  el.indeterminate = indeterminate;
+}
+
 const sizeYClassNames = {
   none: styles['Checkbox--sizeY-none'],
   ['compact']: styles['Checkbox--sizeY-compact'],
@@ -68,10 +72,10 @@ export const Checkbox = ({
   const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();
 
   React.useEffect(() => {
-    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;
+    const indeterminateValue = indeterminate ?? Boolean(defaultIndeterminate);
 
     if (inputRef.current) {
-      inputRef.current.indeterminate = Boolean(indeterminateValue);
+      setIndeterminate(inputRef.current, indeterminateValue);
     }
   }, [defaultIndeterminate, indeterminate, inputRef]);
 
@@ -80,17 +84,16 @@ export const Checkbox = ({
       if (
         defaultIndeterminate !== undefined &&
         indeterminate === undefined &&
-        restProps.checked === undefined &&
-        inputRef.current
+        restProps.checked === undefined
       ) {
-        inputRef.current.indeterminate = false;
+        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],
+    [defaultIndeterminate, indeterminate, restProps.checked, onChange],
   );
 
   if (process.env.NODE_ENV === 'development') {

package/src/components/ChipsInputBase/ChipsInputBase.tsx

@@ -181,9 +181,7 @@ export const ChipsInputBase = <O extends ChipOption>({
       return;
     }
 
-    if (valueLength > 0 && listboxRef.current) {
-      moveFocusToChipOption(0, 'first', listboxRef.current);
-    } else if (inputRef.current) {
+    if (inputRef.current) {
       inputRef.current.focus();
     }
   };

package/src/components/FocusTrap/FocusTrap.tsx

@@ -1,4 +1,5 @@
 import { AllHTMLAttributes, useCallback, useRef, useState } from 'react';
+import { arraysEquals } from '../../helpers/array';
 import { useExternRef } from '../../hooks/useExternRef';
 import { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';
 import {
@@ -53,7 +54,9 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
     const element = focusableNodesRef.current[nodeIndex];
 
     if (element) {
-      element.focus();
+      element.focus({
+        preventScroll: true,
+      });
     }
   };
 
@@ -77,8 +80,14 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
   };
 
   const onMutateParentHandler = (parentNode: HTMLElement) => {
+    const oldFocusableNodes = [...focusableNodesRef.current];
+
     recalculateFocusableNodesRef(parentNode);
 
+    if (arraysEquals(oldFocusableNodes, focusableNodesRef.current)) {
+      return;
+    }
+
     if (document) {
       const activeElement = document.activeElement as HTMLElement;
       const currentElementIndex = Math.max(

package/src/components/PanelHeaderContext/PanelHeaderContext.tsx

@@ -35,6 +35,8 @@ export const PanelHeaderContext = ({
   const elementRef = React.useRef<HTMLDivElement>(null);
   const [animationState, animationHandlers] = useCSSKeyframesAnimationController(
     opened ? 'enter' : 'exit',
+    undefined,
+    true,
   );
   const visible = animationState !== 'exited';
 

package/src/components/Search/Search.module.css

@@ -159,21 +159,20 @@
 
 .Search__after {
   flex: 0;
-  transform: translate(50%);
   transform-origin: left;
   min-inline-size: initial;
   max-inline-size: min-content;
   pointer-events: none;
-  transition:
-    flex 0.3s var(--vkui--animation_easing_platform),
-    transform 0.3s var(--vkui--animation_easing_platform);
+  transition-timing-function: var(--vkui--animation_easing_platform);
+  transition-duration: 0.3s;
+  transition-property: flex, margin-inline;
   overflow: hidden;
+  margin-inline: 0;
 }
 
 .Search--focused .Search__after,
 .Search--has-value .Search__after {
   flex: 1;
-  transform: translate(0);
   pointer-events: initial;
   margin-inline: 4px calc(4px - var(--vkui--size_base_padding_horizontal--regular));
 }

package/src/components/Snackbar/Snackbar.module.css

@@ -4,7 +4,7 @@
   --vkui_internal--snackbar_shift_x: 0;
   --vkui_internal--snackbar_shift_y: 0;
   --vkui_internal--snackbar_animation_from: translate3d(0, 0, 0);
-  --vkui_internal--snackbar_animation_to: translate3d(0, var(--vkui_internal--snackbar_shift_y), 0);
+  --vkui_internal--snackbar_animation_to: translate3d(0, 0, 0);
   --vkui_internal--snackbar_animation_duration: 340ms;
 
   position: fixed;
@@ -22,6 +22,7 @@
 .Snackbar--placement-top,
 .Snackbar--placement-top-end {
   --vkui_internal--snackbar_animation_from: translate3d(0, -100%, 0);
+  --vkui_internal--snackbar_animation_to: translate3d(0, var(--vkui_internal--snackbar_shift_y), 0);
 
   inset-block-start: var(--vkui_internal--safe_area_inset_top);
 }
@@ -29,7 +30,8 @@
 .Snackbar--placement-bottom-start,
 .Snackbar--placement-bottom,
 .Snackbar--placement-bottom-end {
-  --vkui_internal--snackbar_animation_from: translate3d(0, 100%, 0);
+  --vkui_internal--snackbar_animation_from: translate3d(-100%, 0, 0);
+  --vkui_internal--snackbar_animation_to: translate3d(var(--vkui_internal--snackbar_shift_x), 0, 0);
 
   inset-block-end: var(--vkui_internal--snackbar_safe_area_inset_bottom);
 }
@@ -42,23 +44,26 @@
 
   .Snackbar--placement-top,
   .Snackbar--placement-bottom {
-    inset-inline: 0;
     margin-inline: auto;
   }
 
-  .Snackbar--placement-top-start,
-  .Snackbar--placement-top-end {
-    inset-block-start: var(--vkui_internal--safe_area_inset_top);
-  }
-
-  .Snackbar--placement-bottom-start,
-  .Snackbar--placement-bottom-end {
-    inset-block-end: var(--vkui_internal--snackbar_safe_area_inset_bottom);
+  .Snackbar--placement-bottom {
+    --vkui_internal--snackbar_animation_from: translate3d(0, 100%, 0);
+    --vkui_internal--snackbar_animation_to: translate3d(
+      0,
+      var(--vkui_internal--snackbar_shift_y),
+      0
+    );
   }
 
   .Snackbar--placement-top-start,
   .Snackbar--placement-bottom-start {
     --vkui_internal--snackbar_animation_from: translate3d(-100%, 0, 0);
+    --vkui_internal--snackbar_animation_to: translate3d(
+      var(--vkui_internal--snackbar_shift_x),
+      0,
+      0
+    );
 
     inset-inline-start: var(--vkui_internal--safe_area_inset_left);
     inset-inline-end: auto;
@@ -67,20 +72,14 @@
   .Snackbar--placement-top-end,
   .Snackbar--placement-bottom-end {
     --vkui_internal--snackbar_animation_from: translate3d(100%, 0, 0);
-
-    inset-inline-start: auto;
-    inset-inline-end: var(--vkui_internal--safe_area_inset_right);
-  }
-
-  .Snackbar--placement-top-start,
-  .Snackbar--placement-bottom-start,
-  .Snackbar--placement-top-end,
-  .Snackbar--placement-bottom-end {
     --vkui_internal--snackbar_animation_to: translate3d(
       var(--vkui_internal--snackbar_shift_x),
       0,
       0
     );
+
+    inset-inline-start: auto;
+    inset-inline-end: var(--vkui_internal--safe_area_inset_right);
   }
 }
 
@@ -89,9 +88,37 @@
   animation-duration: var(--vkui_internal--snackbar_animation_duration);
   animation-timing-function: var(--vkui--animation_easing_platform);
   animation-fill-mode: both;
+}
+
+.Snackbar--placement-top-start .Snackbar__in,
+.Snackbar--placement-top .Snackbar__in,
+.Snackbar--placement-top-end .Snackbar__in {
   transform: translate3d(0, var(--vkui_internal--snackbar_shift_y), 0);
 }
 
+.Snackbar--placement-bottom-start .Snackbar__in,
+.Snackbar--placement-bottom .Snackbar__in,
+.Snackbar--placement-bottom-end .Snackbar__in {
+  transform: translate3d(var(--vkui_internal--snackbar_shift_x), 0, 0);
+}
+
+@media (--desktop) {
+  .Snackbar__in {
+    --vkui_internal--snackbar_in_padding: 12px;
+  }
+
+  .Snackbar--placement-top-start .Snackbar__in,
+  .Snackbar--placement-bottom-start .Snackbar__in,
+  .Snackbar--placement-top-end .Snackbar__in,
+  .Snackbar--placement-bottom-end .Snackbar__in {
+    transform: translate3d(var(--vkui_internal--snackbar_shift_x), 0, 0);
+  }
+
+  .Snackbar--placement-bottom .Snackbar__in {
+    transform: translate3d(0, var(--vkui_internal--snackbar_shift_y), 0);
+  }
+}
+
 .Snackbar--state-enter .Snackbar__in,
 .Snackbar--state-entering .Snackbar__in {
   animation-name: animation-snackbar-slide-in;
@@ -126,19 +153,6 @@
   }
 } /* stylelint-disable-next-line at-rule-empty-line-before */
 
-@media (--desktop) {
-  .Snackbar__in {
-    --vkui_internal--snackbar_in_padding: 12px;
-  }
-
-  .Snackbar--placement-top-start .Snackbar__in,
-  .Snackbar--placement-bottom-start .Snackbar__in,
-  .Snackbar--placement-top-end .Snackbar__in,
-  .Snackbar--placement-bottom-end .Snackbar__in {
-    transform: translate3d(var(--vkui_internal--snackbar_shift_x), 0, 0);
-  }
-}
-
 @keyframes animation-snackbar-slide-in {
   from {
     opacity: 0;