@vkontakte/vkui 7.11.4 → 7.11.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.11.4",
+  "version": "7.11.6",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",

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

@@ -20,33 +20,39 @@
   }
 }
 @supports not (scrollbar-color: auto) {
-  .scrollbarHidden::-webkit-scrollbar {
-    display: none;
-  }
+  /**
+   * Android WebView не поддерживает scrollbar-color, поэтому отрисовываем
+   * полосы прокрутки только если основное указательное устройство мышь
+   */
+  @media (--pointer-has) {
+    .scrollbarHidden::-webkit-scrollbar {
+      display: none;
+    }
 
-  .host::-webkit-scrollbar {
-    inline-size: 12px;
-    block-size: 12px;
-    background: 0 0;
-  }
+    .host::-webkit-scrollbar {
+      inline-size: 12px;
+      block-size: 12px;
+      background: 0 0;
+    }
 
-  .host::-webkit-scrollbar-track,
-  .host::-webkit-scrollbar-corner {
-    background: transparent;
-  }
+    .host::-webkit-scrollbar-track,
+    .host::-webkit-scrollbar-corner {
+      background: transparent;
+    }
 
-  .host::-webkit-scrollbar-thumb,
-  .host::-webkit-scrollbar-thumb {
-    background-color: var(--vkui--color_icon_tertiary_alpha);
-    background-clip: padding-box, content-box;
-    border: 3px solid transparent;
-    border-radius: 6px;
-  }
+    .host::-webkit-scrollbar-thumb,
+    .host::-webkit-scrollbar-thumb {
+      background-color: var(--vkui--color_icon_tertiary_alpha);
+      background-clip: padding-box, content-box;
+      border: 3px solid transparent;
+      border-radius: 6px;
+    }
 
-  .host::-webkit-scrollbar-thumb:hover,
-  .host::-webkit-scrollbar-thumb:active {
-    background-color: var(--vkui--color_icon_tertiary_alpha--hover);
-    border: 2px solid transparent;
+    .host::-webkit-scrollbar-thumb:hover,
+    .host::-webkit-scrollbar-thumb:active {
+      background-color: var(--vkui--color_icon_tertiary_alpha--hover);
+      border: 2px solid transparent;
+    }
   }
 }
 

package/src/components/CustomScrollView/CustomScrollView.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./CustomScrollView.module.css"],"names":["host","scrollbarHidden","overscrollBehaviorContain","overscrollBehaviorNone","scrollBehaviorSmooth","horizontalScrollEnabled"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAQEA,M,WARF;AAAA,E,aAaEC,iB,WAbF;AAAA,E,aAsBEA,iB,WAtBF;AAAA,E,aA0BED,M,WA1BF;AAAA,E,aAgCEA,M,WAhCF;AAAA,E,aAiCIA,M,WAjCJ;AAAA,E,aAqCEA,M,WArCF;AAAA,E,aAsCIA,M,WAtCJ;AAAA,E,aA6CEA,M,WA7CF;AAAA,E,aA8CIA,M,WA9CJ;AAAA,E,aAoDAE,2B,WApDA;AAAA,E,aAwDAC,wB,WAxDA;AAAA,E,aA4DAC,sB,WA5DA;AAAA,E,aAgEAC,yB,WAhEA;AAAA;AAAA","file":"CustomScrollView.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./CustomScrollView.module.css"],"names":["host","scrollbarHidden","overscrollBehaviorContain","overscrollBehaviorNone","scrollBehaviorSmooth","horizontalScrollEnabled"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAQEA,M,WARF;AAAA,E,aAaEC,iB,WAbF;AAAA,E,aA2BIA,iB,WA3BJ;AAAA,E,aA+BID,M,WA/BJ;AAAA,E,aAqCIA,M,WArCJ;AAAA,E,aAsCQA,M,WAtCR;AAAA,E,aA0CIA,M,WA1CJ;AAAA,E,aA2CQA,M,WA3CR;AAAA,E,aAkDIA,M,WAlDJ;AAAA,E,aAmDQA,M,WAnDR;AAAA,E,aA0DAE,2B,WA1DA;AAAA,E,aA8DAC,wB,WA9DA;AAAA,E,aAkEAC,sB,WAlEA;AAAA,E,aAsEAC,yB,WAtEA;AAAA;AAAA","file":"CustomScrollView.module.css.d.ts","sourceRoot":""}

package/src/components/Touch/Touch.tsx

@@ -8,6 +8,53 @@ import { coordX, coordY, touchEnabled, type VKUITouchEvent } from '../../lib/tou
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HasComponent, HasRootRef } from '../../types';
 
+interface EventWithType {
+  /**
+   * Тип события.
+   */
+  readonly type: string;
+}
+
+function isTouchEvent(event: EventWithType) {
+  return event.type.startsWith('touch');
+}
+
+type CheckEvent = (event: EventWithType) => void;
+
+type IsEventLock = (event: EventWithType) => boolean;
+
+/**
+ * Телефоны после touch событий могут отправлять события мыши,
+ * Это может происходить при обычном нажатии.
+ *
+ * Нельзя использовать хук во время рендеринга.
+ */
+function useMouseEventLock(): [IsEventLock, CheckEvent] {
+  const isMouseEventLockRef = React.useRef<boolean>(false);
+  const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  const isEventLock: IsEventLock = React.useCallback((event: EventWithType) => {
+    return !isTouchEvent(event) && isMouseEventLockRef.current === true;
+  }, []);
+
+  const checkEvent: CheckEvent = React.useCallback((event: EventWithType) => {
+    if (!isTouchEvent(event)) {
+      return;
+    }
+
+    isMouseEventLockRef.current = true;
+
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      isMouseEventLockRef.current = false;
+    }, 1000);
+  }, []);
+
+  React.useEffect(() => () => clearTimeout(timerRef.current), []);
+
+  return [isEventLock, checkEvent];
+}
+
 /**
  * Костыль для правильной работы тайпскрипта.
  */
@@ -236,6 +283,8 @@ export const Touch = ({
   const didSlide = React.useRef(false);
   const disposeTargetNativeGestureEvents = React.useRef<VoidFunction | null>(null);
 
+  const [isEventLock, checkEventForLock] = useMouseEventLock();
+
   const cleanupTargetNativeGestureEvents = () => {
     gestureRef.current = null;
     if (disposeTargetNativeGestureEvents.current) {
@@ -246,10 +295,6 @@ export const Touch = ({
 
   React.useEffect(() => cleanupTargetNativeGestureEvents, []);
 
-  const isTouchEvent = (event: MouseEvent | TouchEvent) => {
-    return event.type.startsWith('touch');
-  };
-
   /**
    * Note: используем `useStableCallback()`, чтобы не терялась область видимости `onEnd`/`onEndX`/`onEndY`.
    */
@@ -339,6 +384,13 @@ export const Touch = ({
   const handlePointerDown = useStableCallback(
     (event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement> | TouchEvent) => {
       // Если touchstart сэмулировало mousedown, то заканчиваем обработку
+      if (isEventLock(event)) {
+        return;
+      }
+
+      // Помечаем что произошло touch событие
+      checkEventForLock(event);
+
       if (gestureRef.current !== null) {
         return;
       }
@@ -465,11 +517,6 @@ export const Touch = ({
       // handlePointerDown(onTouchStart устанавливается отдельно через initializeNativeTouchEventStartWithPassiveFalse)
       onMouseDownCapture={useCapture ? handlePointerDown : undefined}
       onMouseDown={!useCapture ? handlePointerDown : undefined}
-      onPointerDown={(event: PointerEvent) => {
-        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
-          event.preventDefault();
-        }
-      }}
     />
   );
 };

package/src/lib/sheet/controllers/BottomSheetController.ts

@@ -321,9 +321,19 @@ export class BottomSheetController {
       sheetScrollEl.contains(targetEl) &&
       sheetScrollEl.scrollHeight > sheetScrollEl.clientHeight
     ) {
-      sheetScrollEl.style.setProperty('overflow-y', 'hidden');
+      const scrollbarWidth = sheetScrollEl.offsetWidth - sheetScrollEl.clientWidth;
+
+      Object.assign(sheetScrollEl.style, {
+        paddingInlineEnd: `${scrollbarWidth}px`,
+        overflowY: 'hidden',
+        boxSizing: 'border-box',
+      });
       return function dispose() {
-        sheetScrollEl.style.removeProperty('overflow-y');
+        Object.assign(sheetScrollEl.style, {
+          paddingInlineEnd: '',
+          overflowY: '',
+          boxSizing: '',
+        });
       };
     }
     return noop;