fix(HorizontalScroll): rm hasPointer

packages/vkui/src/components/CarouselBase/CarouselBase.module.css

@@ -101,7 +101,7 @@
   padding-inline-start: var(--vkui--size_base_padding_horizontal--regular);
 }
 
-.host:hover .arrow {
+.hover .arrow {
   opacity: var(--vkui--opacity_disable_accessibility);
 }
 

packages/vkui/src/components/CarouselBase/CarouselBase.tsx

@@ -2,14 +2,15 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
 import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useMutationObserver } from '../../hooks/useMutationObserver';
 import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { useDOM } from '../../lib/dom';
+import { mergeCalls } from '../../lib/mergeCalls';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
+import { useHover } from '../Clickable/useState';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { type CustomTouchEvent } from '../Touch/Touch';
 import { Bullets } from './Bullets';
@@ -57,6 +58,8 @@ export const CarouselBase = ({
   onChange,
   onPrevClick,
   onNextClick,
+  onPointerEnter,
+  onPointerLeave,
   align = 'left',
   showArrows,
   getRef,
@@ -102,8 +105,6 @@ export const CarouselBase = ({
   const [controlElementsState, setControlElementsState] =
     React.useState<ControlElementsState>(CONTROL_ELEMENTS_STATE);
 
-  const hasPointer = useAdaptivityHasPointer();
-
   const slidesContainerId = React.useId();
 
   const isCenterAlign = align === 'center';
@@ -550,21 +551,26 @@ export const CarouselBase = ({
     }
   };
 
+  const { isHovered, ...hoverHandlers } = useHover();
+
+  const handlers = mergeCalls(hoverHandlers, { onPointerEnter, onPointerLeave });
+
   return (
     <RootComponent
       {...restProps}
+      {...handlers}
       role="region"
       onScroll={handleScrollForFixVoiceOverBehavior}
       aria-roledescription={ariaRoleDescription}
       baseClassName={classNames(
         styles.host,
         slideWidth === 'custom' && styles.customWidth,
+        isHovered && styles.hover,
         isDraggable && styles.draggable,
       )}
       getRootRef={rootRef}
     >
       <ScrollArrows
-        hasPointer={hasPointer}
         canSlideLeft={canSlideLeft}
         canSlideRight={canSlideRight}
         onSlideRight={slideRight}

packages/vkui/src/components/CarouselBase/ScrollArrows.tsx

@@ -43,7 +43,6 @@ interface ScrollArrowsProps
       'showArrows' | 'arrowSize' | 'arrowAreaHeight' | 'arrowPrevLabel' | 'arrowNextLabel'
     >,
     ScrollArrowsTestIds {
-  hasPointer?: boolean;
   canSlideLeft: boolean;
   canSlideRight: boolean;
   onSlideLeft: (e: React.MouseEvent) => void;
@@ -52,7 +51,6 @@ interface ScrollArrowsProps
 }
 
 export const ScrollArrows = ({
-  hasPointer,
   canSlideLeft,
   canSlideRight,
   onSlideRight,
@@ -69,7 +67,7 @@ export const ScrollArrows = ({
   const { focusVisible: prevArrowFocusVisible, ...prevArrowFocusHandlers } = useFocusVisible();
   const { focusVisible: nextArrowFocusVisible, ...nextArrowFocusHandlers } = useFocusVisible();
 
-  return showArrows && hasPointer ? (
+  return showArrows ? (
     <>
       {canSlideLeft && (
         <ScrollArrow

packages/vkui/src/components/Clickable/useState.tsx

@@ -79,14 +79,19 @@
   /**
    * Блокирование активации состояний.
    */
-  lockState: boolean;
-  setParentStateLock: (v: boolean) => void;
+  lockState?: boolean;
+  setParentStateLock?: (v: boolean) => void;
 }
 
 /**
  * Управляет наведением на компонент, игнорирует тач события.
  */
-function useHover({ hovered, hasHover = true, lockState, setParentStateLock }: UseHoverProps) {
+export function useHover({
+  hovered,
+  hasHover = true,
+  lockState = false,
+  setParentStateLock = noop,
+}: UseHoverProps = {}) {
   const [hoveredStateLocal, setHoveredStateLocal] = React.useState(false);
 
   const prevIsHoveredRef = React.useRef<boolean | undefined>(undefined);
@@ -180,7 +185,7 @@
 
   const onPointerCancel: React.PointerEventHandler = (e) => {
     if (pointersUp.has(e.pointerId)) {
       pointersUp.delete(e.pointerId);
       return;
     }
 
@@ -188,7 +193,7 @@
   };
 
   const onPointerUp: React.PointerEventHandler = (e) => {
     pointersUp.add(e.pointerId);
 
     if (lockStateRef.current) {
       return;

packages/vkui/src/components/HorizontalScroll/HorizontalScroll.e2e-playground.tsx

@@ -64,38 +64,13 @@ export const HorizontalScrollSmallTabletPlayground = (props: ComponentPlayground
   );
 };
 
-export const HorizontalScrollWithHasMousePlayground = ({
+export const HorizontalScrollHoverTestPlayground = ({
   colorScheme,
   ...restProps
 }: ComponentPlaygroundProps) => {
   return (
     <ConfigProvider colorScheme={colorScheme}>
-      <AdaptivityProvider viewWidth={ViewWidth.SMALL_TABLET} hasPointer>
-        <AppDefaultWrapper>
-          <HorizontalScroll
-            {...restProps}
-            getRef={(element) => {
-              if (!element) {
-                return;
-              }
-              element.scrollLeft = 32;
-            }}
-          >
-            {items}
-          </HorizontalScroll>
-        </AppDefaultWrapper>
-      </AdaptivityProvider>
-    </ConfigProvider>
-  );
-};
-
-export const HorizontalScrollWithoutHasMousePlayground = ({
-  colorScheme,
-  ...restProps
-}: ComponentPlaygroundProps) => {
-  return (
-    <ConfigProvider colorScheme={colorScheme}>
-      <AdaptivityProvider viewWidth={ViewWidth.SMALL_TABLET} hasPointer={false}>
+      <AdaptivityProvider viewWidth={ViewWidth.SMALL_TABLET}>
         <AppDefaultWrapper>
           <HorizontalScroll
             {...restProps}

packages/vkui/src/components/HorizontalScroll/HorizontalScroll.e2e.tsx

@@ -1,11 +1,9 @@
 import { test } from '@vkui-e2e/test';
 import { ViewWidth } from '../../lib/adaptivity';
 import {
-  HorizontalScrollMobilePlayground,
+  HorizontalScrollHoverTestPlayground,
   HorizontalScrollSmallTabletPlayground,
   HorizontalScrollWithFocusVisible,
-  HorizontalScrollWithHasMousePlayground,
-  HorizontalScrollWithoutHasMousePlayground,
 } from './HorizontalScroll.e2e-playground';
 
 test.describe('HorizontalScroll', () => {
@@ -26,24 +24,6 @@ test.describe('HorizontalScroll', () => {
   });
 });
 
-test.describe('HorizontalScroll', () => {
-  test.use({
-    onlyForPlatforms: ['android'],
-    adaptivityProviderProps: {
-      viewWidth: ViewWidth.MOBILE,
-      hasPointer: false,
-    },
-  });
-  test('ViewWidth.MOBILE hasPointer=false', async ({
-    mount,
-    expectScreenshotClippedToContent,
-    componentPlaygroundProps,
-  }) => {
-    await mount(<HorizontalScrollMobilePlayground {...componentPlaygroundProps} />);
-    await expectScreenshotClippedToContent();
-  });
-});
-
 test.describe('HorizontalScroll', () => {
   const DATA_TESTID = 'horizontal-scroll';
   const CUSTOM_ROOT_SELECTOR = `[data-testid="${DATA_TESTID}"]`;
@@ -55,27 +35,7 @@ test.describe('HorizontalScroll', () => {
     componentPlaygroundProps,
   }) => {
     await mount(
-      <HorizontalScrollWithHasMousePlayground
-        {...componentPlaygroundProps}
-        data-testid={DATA_TESTID}
-      />,
-    );
-
-    await page.hover(CUSTOM_ROOT_SELECTOR);
-
-    await expectScreenshotClippedToContent({
-      cropToContentSelector: CUSTOM_ROOT_SELECTOR,
-    });
-  });
-
-  test('does not have arrows without mouse', async ({
-    mount,
-    page,
-    expectScreenshotClippedToContent,
-    componentPlaygroundProps,
-  }) => {
-    await mount(
-      <HorizontalScrollWithoutHasMousePlayground
+      <HorizontalScrollHoverTestPlayground
         {...componentPlaygroundProps}
         data-testid={DATA_TESTID}
       />,

packages/vkui/src/components/HorizontalScroll/HorizontalScroll.module.css

@@ -43,8 +43,7 @@
   opacity: 0;
 }
 
-.host:hover .arrow,
-.withConstArrows .arrow {
+.showArrows .arrow {
   opacity: var(--vkui--opacity_disable_accessibility);
 }
 

packages/vkui/src/components/HorizontalScroll/HorizontalScroll.test.tsx

@@ -3,7 +3,6 @@ import { act } from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { noop } from '@vkontakte/vkjs';
 import { baselineComponent, userEvent, withFakeTimers } from '../../testing/utils';
-import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import { DirectionProvider } from '../DirectionProvider/DirectionProvider';
 import { HorizontalScroll } from './HorizontalScroll';
 
@@ -74,25 +73,23 @@ describe('HorizontalScroll', () => {
       let scrollContainer: HTMLDivElement | null = null;
 
       const result = render(
-        <AdaptivityProvider hasPointer>
-          <HorizontalScroll
-            getRef={(e) => {
-              scrollContainer = e;
-              mockRef(e);
-            }}
-            data-testid="horizontal-scroll"
-            showArrows="always"
+        <HorizontalScroll
+          getRef={(e) => {
+            scrollContainer = e;
+            mockRef(e);
+          }}
+          data-testid="horizontal-scroll"
+          showArrows="always"
+        >
+          <button
+            type="button"
+            data-testid="focusable-element"
+            style={{ width: '800px', height: '50px' }}
+            onClick={noop}
           >
-            <button
-              type="button"
-              data-testid="focusable-element"
-              style={{ width: '800px', height: '50px' }}
-              onClick={noop}
-            >
-              Button
-            </button>
-          </HorizontalScroll>
-        </AdaptivityProvider>,
+            Button
+          </button>
+        </HorizontalScroll>,
       );
 
       expect(document.activeElement).toBe(document.body);