@vkontakte/vkui 6.7.3 → 6.7.4

package/src/components/DateInput/DateInput.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
+import { startOfDay, startOfMinute } from 'date-fns';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useDateInput } from '../../hooks/useDateInput';
 import { useExternRef } from '../../hooks/useExternRef';
@@ -8,7 +9,7 @@ import { callMultiple } from '../../lib/callMultiple';
 import { format, isMatch, parse } from '../../lib/date';
 import type { PlacementWithAuto } from '../../lib/floating';
 import type { HasRootRef } from '../../types';
-import { Calendar, type CalendarProps } from '../Calendar/Calendar';
+import { Calendar, type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';
 import { FormField, type FormFieldProps } from '../FormField/FormField';
 import { IconButton } from '../IconButton/IconButton';
 import { InputLike } from '../InputLike/InputLike';
@@ -23,6 +24,14 @@ const sizeYClassNames = {
   compact: styles['DateInput--sizeY-compact'],
 };
 
+export type DateInputPropsTestsProps = {
+  dayFieldTestId?: string;
+  monthFieldTestId?: string;
+  yearFieldTestId?: string;
+  hourFieldTestId?: string;
+  minuteFieldTestId?: string;
+};
+
 export interface DateInputProps
   extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange' | 'size'>,
     Pick<
@@ -56,12 +65,15 @@ export interface DateInputProps
       | 'renderDayContent'
     >,
     HasRootRef<HTMLDivElement>,
-    Omit<FormFieldProps, 'maxHeight'> {
+    Omit<FormFieldProps, 'maxHeight'>,
+    DateInputPropsTestsProps {
+  calendarTestsProps?: CalendarTestsProps;
   calendarPlacement?: PlacementWithAuto;
   closeOnChange?: boolean;
   clearFieldLabel?: string;
   showCalendarLabel?: string;
   disableCalendar?: boolean;
+  onCalendarOpenChanged?: (opened: boolean) => void;
 }
 
 const elementsConfig = (index: number) => {
@@ -147,6 +159,13 @@ export const DateInput = ({
   nextMonthIcon,
   disableCalendar = false,
   renderDayContent,
+  onCalendarOpenChanged,
+  calendarTestsProps,
+  dayFieldTestId,
+  monthFieldTestId,
+  yearFieldTestId,
+  hourFieldTestId,
+  minuteFieldTestId,
   ...props
 }: DateInputProps): React.ReactNode => {
   const daysRef = React.useRef<HTMLSpanElement>(null);
@@ -173,7 +192,10 @@ export const DateInput = ({
       }
 
       if (isMatch(formattedValue, mask)) {
-        onChange?.(parse(formattedValue, mask, value ?? new Date()));
+        const now = new Date();
+        onChange?.(
+          parse(formattedValue, mask, value ?? (enableTime ? startOfMinute(now) : startOfDay(now))),
+        );
       }
     },
     [enableTime, maxElement, onChange, value],
@@ -205,6 +227,7 @@ export const DateInput = ({
     onInternalValueChange,
     getInternalValue,
     value,
+    onCalendarOpenChanged,
   });
 
   const { sizeY = 'none' } = useAdaptivity();
@@ -262,6 +285,7 @@ export const DateInput = ({
           onElementSelect={setFocusedElement}
           value={internalValue[0]}
           label={changeDayLabel}
+          data-testid={dayFieldTestId}
         />
         <InputLikeDivider>.</InputLikeDivider>
         <InputLike
@@ -271,6 +295,7 @@ export const DateInput = ({
           onElementSelect={setFocusedElement}
           value={internalValue[1]}
           label={changeMonthLabel}
+          data-testid={monthFieldTestId}
         />
         <InputLikeDivider>.</InputLikeDivider>
         <InputLike
@@ -280,6 +305,7 @@ export const DateInput = ({
           onElementSelect={setFocusedElement}
           value={internalValue[2]}
           label={changeYearLabel}
+          data-testid={yearFieldTestId}
         />
         {enableTime && (
           <React.Fragment>
@@ -293,6 +319,7 @@ export const DateInput = ({
               onElementSelect={setFocusedElement}
               value={internalValue[3]}
               label={changeHoursLabel}
+              data-testid={hourFieldTestId}
             />
             <InputLikeDivider>:</InputLikeDivider>
             <InputLike
@@ -302,6 +329,7 @@ export const DateInput = ({
               onElementSelect={setFocusedElement}
               value={internalValue[4]}
               label={changeMinutesLabel}
+              data-testid={minuteFieldTestId}
             />
           </React.Fragment>
         )}
@@ -342,6 +370,7 @@ export const DateInput = ({
             nextMonthIcon={nextMonthIcon}
             minDateTime={minDateTime}
             maxDateTime={maxDateTime}
+            {...calendarTestsProps}
           />
         </Popper>
       )}

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -12,6 +12,7 @@ import type { HasRootRef } from '../../types';
 import {
   CalendarRange,
   type CalendarRangeProps,
+  type CalendarRangeTestsProps,
   type DateRangeType,
 } from '../CalendarRange/CalendarRange';
 import { FormField, type FormFieldProps } from '../FormField/FormField';
@@ -29,6 +30,17 @@ const sizeYClassNames = {
   compact: styles['DateRangeInput--sizeY-compact'],
 };
 
+type DateTestsProps = {
+  day?: string;
+  month?: string;
+  year?: string;
+};
+
+export type DateRangeInputTestsProps = {
+  startDateTestsProps?: DateTestsProps;
+  endDateTestsProps?: DateTestsProps;
+};
+
 export interface DateRangeInputProps
   extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>,
     Pick<
@@ -50,9 +62,12 @@ export interface DateRangeInputProps
       | 'renderDayContent'
     >,
     HasRootRef<HTMLDivElement>,
-    Omit<FormFieldProps, 'maxHeight'> {
+    Omit<FormFieldProps, 'maxHeight'>,
+    DateRangeInputTestsProps {
+  calendarTestsProps?: CalendarRangeTestsProps;
   calendarPlacement?: PlacementWithAuto;
   closeOnChange?: boolean;
+  onCalendarOpenChanged?: (opened: boolean) => void;
   clearFieldLabel?: string;
   showCalendarLabel?: string;
   changeStartDayLabel?: string;
@@ -140,7 +155,11 @@ export const DateRangeInput = ({
   prevMonthIcon,
   nextMonthIcon,
   disableCalendar = false,
+  onCalendarOpenChanged,
   renderDayContent,
+  calendarTestsProps,
+  startDateTestsProps,
+  endDateTestsProps,
   ...props
 }: DateRangeInputProps): React.ReactNode => {
   const daysStartRef = React.useRef<HTMLSpanElement>(null);
@@ -221,6 +240,7 @@ export const DateRangeInput = ({
     onInternalValueChange,
     getInternalValue,
     value,
+    onCalendarOpenChanged,
   });
 
   const { sizeY = 'none' } = useAdaptivity();
@@ -279,6 +299,7 @@ export const DateRangeInput = ({
           onElementSelect={setFocusedElement}
           value={internalValue[0]}
           label={changeStartDayLabel}
+          data-testid={startDateTestsProps?.day}
         />
         <InputLikeDivider>.</InputLikeDivider>
         <InputLike
@@ -288,6 +309,7 @@ export const DateRangeInput = ({
           onElementSelect={setFocusedElement}
           value={internalValue[1]}
           label={changeStartMonthLabel}
+          data-testid={startDateTestsProps?.month}
         />
         <InputLikeDivider>.</InputLikeDivider>
         <InputLike
@@ -297,6 +319,7 @@ export const DateRangeInput = ({
           onElementSelect={setFocusedElement}
           value={internalValue[2]}
           label={changeStartYearLabel}
+          data-testid={startDateTestsProps?.year}
         />
         <InputLikeDivider>{' — '}</InputLikeDivider>
         <InputLike
@@ -306,6 +329,7 @@ export const DateRangeInput = ({
           onElementSelect={setFocusedElement}
           value={internalValue[3]}
           label={changeEndDayLabel}
+          data-testid={endDateTestsProps?.day}
         />
         <InputLikeDivider>.</InputLikeDivider>
         <InputLike
@@ -315,6 +339,7 @@ export const DateRangeInput = ({
           onElementSelect={setFocusedElement}
           value={internalValue[4]}
           label={changeEndMonthLabel}
+          data-testid={endDateTestsProps?.month}
         />
         <InputLikeDivider>.</InputLikeDivider>
         <InputLike
@@ -324,6 +349,7 @@ export const DateRangeInput = ({
           onElementSelect={setFocusedElement}
           value={internalValue[5]}
           label={changeEndYearLabel}
+          data-testid={endDateTestsProps?.year}
         />
       </Text>
       {open && !disableCalendar && (
@@ -345,6 +371,7 @@ export const DateRangeInput = ({
             prevMonthIcon={prevMonthIcon}
             nextMonthIcon={nextMonthIcon}
             renderDayContent={renderDayContent}
+            {...calendarTestsProps}
           />
         </Popper>
       )}

package/src/components/FocusTrap/FocusTrap.tsx

@@ -1,7 +1,8 @@
-import { type AllHTMLAttributes, useCallback, useRef, useState } from 'react';
+import { type AllHTMLAttributes, type RefObject, useRef, useState } from 'react';
 import { arraysEquals } from '../../helpers/array';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useMutationObserver } from '../../hooks/useMutationObserver';
+import { useStableCallback } from '../../hooks/useStableCallback';
 import { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';
 import {
   contains,
@@ -14,12 +15,78 @@ import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HasComponent, HasRootRef } from '../../types';
 
 const FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();
+
+const useRestoreFocus = ({
+  restoreFocus,
+  timeout,
+  mount,
+  ref,
+}: Pick<FocusTrapProps, 'restoreFocus' | 'timeout' | 'mount'> & {
+  ref: RefObject<HTMLElement | null>;
+}) => {
+  const restoreFocusRef = useRef(restoreFocus);
+  restoreFocusRef.current = restoreFocus;
+  const [restoreFocusTo, setRestoreFocusTo] = useState<Element | null>(null);
+
+  const restoreFocusImpl = useStableCallback(() => {
+    const shouldRestoreFocus =
+      typeof restoreFocusRef.current === 'function'
+        ? restoreFocusRef.current()
+        : restoreFocusRef.current;
+
+    if (!shouldRestoreFocus) {
+      return;
+    }
+
+    setTimeout(() => {
+      const restoreFocusElement =
+        (isHTMLElement(shouldRestoreFocus) && shouldRestoreFocus) ||
+        (isHTMLElement(restoreFocusTo) && restoreFocusTo) ||
+        null;
+
+      if (restoreFocusElement) {
+        restoreFocusElement.focus();
+        setRestoreFocusTo(null);
+      }
+    }, timeout);
+  });
+
+  useIsomorphicLayoutEffect(
+    function calculateRestoreFocusTo() {
+      if (!ref.current || !restoreFocusRef.current || !mount) {
+        setRestoreFocusTo(null);
+        return;
+      }
+      setRestoreFocusTo(getActiveElementByAnotherElement(ref.current));
+    },
+    [ref, mount],
+  );
+
+  useIsomorphicLayoutEffect(
+    function tryToRestoreFocusOnUnmount() {
+      return () => {
+        restoreFocusImpl();
+      };
+    },
+    [restoreFocusImpl],
+  );
+
+  useIsomorphicLayoutEffect(
+    function tryToRestoreFocusWhenFakeUnmount() {
+      if (!mount) {
+        restoreFocusImpl();
+      }
+    },
+    [mount, restoreFocusImpl],
+  );
+};
+
 export interface FocusTrapProps<T extends HTMLElement = HTMLElement>
   extends Omit<AllHTMLAttributes<T>, 'autoFocus'>,
     HasRootRef<T>,
     HasComponent {
   autoFocus?: boolean | 'root';
-  restoreFocus?: boolean | (() => boolean);
+  restoreFocus?: boolean | (() => boolean | HTMLElement);
   mount?: boolean;
   timeout?: number;
   onClose?: () => void;
@@ -49,7 +116,12 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
 
   const focusableNodesRef = useRef<HTMLElement[]>([]);
 
-  const [restoreFocusTo, setRestoreFocusTo] = useState<Element | null>(null);
+  useRestoreFocus({
+    restoreFocus,
+    timeout,
+    mount,
+    ref,
+  });
 
   const focusNodeByIndex = (nodeIndex: number) => {
     const element = focusableNodesRef.current[nodeIndex];
@@ -131,48 +203,6 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
     [autoFocus, timeout, disabled],
   );
 
-  const restoreFocusImpl = useCallback(() => {
-    const shouldRestoreFocus = typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;
-
-    if (!restoreFocusTo || !isHTMLElement(restoreFocusTo) || !shouldRestoreFocus) {
-      return;
-    }
-
-    setTimeout(() => {
-      if (restoreFocusTo) {
-        restoreFocusTo.focus();
-        setRestoreFocusTo(null);
-      }
-    }, timeout);
-  }, [restoreFocus, restoreFocusTo, timeout]);
-
-  useIsomorphicLayoutEffect(
-    function calculateRestoreFocusTo() {
-      if (!ref.current || !restoreFocus || !mount) {
-        setRestoreFocusTo(null);
-        return;
-      }
-      setRestoreFocusTo(getActiveElementByAnotherElement(ref.current));
-    },
-    [ref, mount, restoreFocus],
-  );
-
-  useIsomorphicLayoutEffect(
-    function tryToRestoreFocusOnUnmount() {
-      return () => restoreFocusImpl();
-    },
-    [restoreFocusImpl],
-  );
-
-  useIsomorphicLayoutEffect(
-    function tryToRestoreFocusWhenFakeUnmount() {
-      if (!mount) {
-        restoreFocusImpl();
-      }
-    },
-    [mount, restoreFocusImpl],
-  );
-
   useIsomorphicLayoutEffect(() => {
     if (!ref.current) {
       return;

package/src/components/Gallery/Gallery.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { clamp } from '../../helpers/math';
 import { useIsClient } from '../../hooks/useIsClient';
+import { callMultiple } from '../../lib/callMultiple';
 import { BaseGallery } from '../BaseGallery/BaseGallery';
 import { CarouselBase } from '../BaseGallery/CarouselBase/CarouselBase';
 import type { BaseGalleryProps } from '../BaseGallery/types';
@@ -23,6 +24,8 @@ export const Gallery = ({
   onChange,
   bullets,
   looped,
+  onDragStart,
+  onDragEnd,
   ...props
 }: GalleryProps): React.ReactNode => {
   const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);
@@ -46,7 +49,11 @@ export const Gallery = ({
     [isControlled, onChange, slideIndex],
   );
 
-  useAutoPlay(timeout, slideIndex, () => handleChange((slideIndex + 1) % childCount));
+  const autoPlayControls = useAutoPlay({
+    timeout,
+    slideIndex,
+    onNext: () => handleChange((slideIndex + 1) % childCount),
+  });
 
   // prevent invalid slideIndex
   // any slide index is invalid with no slides, just keep it as is
@@ -69,6 +76,8 @@ export const Gallery = ({
     <Component
       dragDisabled={isControlled && !onChange}
       {...props}
+      onDragStart={callMultiple(onDragStart, autoPlayControls.pause)}
+      onDragEnd={callMultiple(onDragEnd, autoPlayControls.resume)}
       bullets={childCount > 0 && bullets}
       slideIndex={safeSlideIndex}
       onChange={handleChange}

package/src/components/Gallery/hooks.ts

@@ -3,49 +3,65 @@ import { useStableCallback } from '../../hooks/useStableCallback';
 import { useDOM } from '../../lib/dom';
 import type { TimeoutId } from '../../types';
 
-export function useAutoPlay(
-  timeout: number,
-  slideIndex: number,
-  callbackFnProp: VoidFunction,
-): void {
+export interface AutoPlayConfig {
+  timeout: number;
+  slideIndex: number;
+  onNext: VoidFunction;
+}
+
+export function useAutoPlay({ timeout, slideIndex, onNext }: AutoPlayConfig): {
+  pause: VoidFunction;
+  resume: VoidFunction;
+} {
   const { document } = useDOM();
-  const callbackFn = useStableCallback(callbackFnProp);
+  const [paused, setPaused] = React.useState(false);
+  const timeoutRef = React.useRef<TimeoutId>(null);
+  const callbackFn = useStableCallback(onNext);
 
-  React.useEffect(
-    function initializeAutoPlay() {
-      if (!document || !timeout) {
-        return;
-      }
+  const pause = React.useCallback(() => setPaused(true), []);
+  const resume = React.useCallback(() => setPaused(false), []);
 
-      let timeoutId: TimeoutId = null;
+  // Выносим функции очистки и старта таймера в отдельные функции
+  const clearAutoPlayTimeout = React.useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
 
-      const stop = () => {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-          timeoutId = null;
-        }
-      };
+  const startAutoPlayTimeout = React.useCallback(() => {
+    if (!document || !timeout || paused) {
+      return;
+    }
 
-      const start = () => {
-        switch (document.visibilityState) {
-          case 'visible':
-            stop();
-            timeoutId = setTimeout(callbackFn, timeout);
-            break;
-          case 'hidden':
-            stop();
-        }
-      };
+    if (document.visibilityState === 'visible') {
+      clearAutoPlayTimeout();
+      timeoutRef.current = setTimeout(callbackFn, timeout);
+    } else {
+      clearAutoPlayTimeout();
+    }
+  }, [document, timeout, paused, clearAutoPlayTimeout, callbackFn]);
 
-      start();
+  // Основной эффект для управления автопроигрыванием
+  React.useEffect(
+    function initializeAutoPlay() {
+      if (!document || !timeout || paused) {
+        return;
+      }
 
-      document.addEventListener('visibilitychange', start);
+      startAutoPlayTimeout();
+      document.addEventListener('visibilitychange', startAutoPlayTimeout);
 
       return () => {
-        stop();
-        document.removeEventListener('visibilitychange', start);
+        clearAutoPlayTimeout();
+        document.removeEventListener('visibilitychange', startAutoPlayTimeout);
       };
     },
-    [document, timeout, slideIndex, callbackFn],
+    [document, timeout, slideIndex, startAutoPlayTimeout, clearAutoPlayTimeout, paused],
   );
+
+  return {
+    resume,
+    pause,
+  };
 }

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { classNames, noop } from '@vkontakte/vkjs';
+import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
 import { useDirection } from '../../hooks/useDirection';
-import { useEventListener } from '../../hooks/useEventListener';
 import { useExternRef } from '../../hooks/useExternRef';
 import { easeInOutSine } from '../../lib/fx';
 import type { HasRef, HTMLAttributesWithRootRef } from '../../types';
@@ -236,44 +235,33 @@ export const HorizontalScroll = ({
     }
   }, [showArrows, hasPointer, scrollerRef, setCanScrollStart, setCanScrollEnd]);
 
-  const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);
-  React.useEffect(
-    function addScrollerRefToScrollEvent() {
-      if (!scrollerRef.current) {
-        return noop;
-      }
+  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);
 
-      scrollEvent.add(scrollerRef.current);
-      return scrollEvent.remove;
+  const _onWheel = React.useCallback(
+    (e: React.WheelEvent) => {
+      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });
     },
-    [scrollEvent, scrollerRef],
+    [scrollerRef],
   );
 
-  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);
-
   /**
    * Прокрутка с помощью любого колеса мыши
    */
-  const onwheel = React.useCallback(
-    (e: WheelEvent) => {
-      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });
+  const onScrollWheel = React.useCallback(
+    (e: React.WheelEvent) => {
+      _onWheel(e);
       e.preventDefault();
     },
-    [scrollerRef],
+    [_onWheel],
   );
 
-  const wheelEvent = useEventListener('wheel', onwheel);
-  React.useEffect(
-    function addScrollerRefToWheelEvent() {
-      if (!scrollerRef.current || !scrollOnAnyWheel) {
-        return noop;
+  const onArrowWheel = React.useCallback(
+    (e: React.WheelEvent) => {
+      if (e.deltaX || (e.deltaY && scrollOnAnyWheel)) {
+        _onWheel(e);
       }
-
-      wheelEvent.add(scrollerRef.current);
-
-      return wheelEvent.remove;
     },
-    [wheelEvent, scrollerRef, scrollOnAnyWheel],
+    [_onWheel, scrollOnAnyWheel],
   );
 
   return (
@@ -300,6 +288,7 @@ export const HorizontalScroll = ({
             styles['HorizontalScroll__arrowLeft'],
           )}
           onClick={scrollToLeft}
+          onWheel={onArrowWheel}
         />
       )}
       {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (
@@ -315,9 +304,15 @@ export const HorizontalScroll = ({
             styles['HorizontalScroll__arrowRight'],
           )}
           onClick={scrollToRight}
+          onWheel={onArrowWheel}
         />
       )}
-      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>
+      <div
+        className={styles['HorizontalScroll__in']}
+        ref={scrollerRef}
+        onScroll={calculateArrowsVisibility}
+        onWheel={scrollOnAnyWheel ? onScrollWheel : undefined}
+      >
         <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>
       </div>
     </RootComponent>

package/src/components/Popover/Popover.tsx

@@ -267,7 +267,7 @@ export const Popover = ({
             mount={!hidden}
             disabled={hidden}
             autoFocus={disableInteractive ? false : autoFocus}
-            restoreFocus={restoreFocus ? onRestoreFocus : false}
+            restoreFocus={restoreFocus ? () => onRestoreFocus(restoreFocus) : false}
             onClose={onEscapeKeyDown}
           >
             {arrow}