@vkontakte/vkui 7.0.1 → 7.1.0

package/src/components/DateInput/DateInput.tsx

@@ -10,6 +10,7 @@ import { useExternRef } from '../../hooks/useExternRef';
 import { callMultiple } from '../../lib/callMultiple';
 import { format, isMatch, parse } from '../../lib/date';
 import type { PlacementWithAuto } from '../../lib/floating';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HasRootRef } from '../../types';
 import { Calendar, type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';
 import { FormField, type FormFieldProps } from '../FormField/FormField';
@@ -18,6 +19,7 @@ import { InputLike } from '../InputLike/InputLike';
 import { InputLikeDivider } from '../InputLike/InputLikeDivider';
 import { Popper } from '../Popper/Popper';
 import { Text } from '../Typography/Text/Text';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import '../InputLike/InputLike.module.css'; // Reorder css
 import styles from './DateInput.module.css';
 
@@ -27,10 +29,25 @@ const sizeYClassNames = {
 };
 
 export type DateInputPropsTestsProps = {
+  /**
+   * Передает атрибут `data-testid` для поля ввода дня
+   */
   dayFieldTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для поля ввода месяца
+   */
   monthFieldTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для поля ввода года
+   */
   yearFieldTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для поля ввода часа
+   */
   hourFieldTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для поля ввода минут
+   */
   minuteFieldTestId?: string;
 };
 
@@ -45,6 +62,7 @@ export interface DateInputProps
       | 'onChange'
       | 'value'
       | 'doneButtonText'
+      | 'DoneButton'
       | 'weekStartsOn'
       | 'disablePickers'
       | 'changeHoursLabel'
@@ -69,6 +87,9 @@ export interface DateInputProps
     HasRootRef<HTMLDivElement>,
     Omit<FormFieldProps, 'maxHeight'>,
     DateInputPropsTestsProps {
+  /**
+   * Передает атрибуты `data-testid` для интерактивных элементов в календаре
+   */
   calendarTestsProps?: CalendarTestsProps;
   calendarPlacement?: PlacementWithAuto;
   closeOnChange?: boolean;
@@ -76,6 +97,10 @@ export interface DateInputProps
   showCalendarLabel?: string;
   disableCalendar?: boolean;
   onCalendarOpenChanged?: (opened: boolean) => void;
+  /**
+   * Колбэк срабатывающий при нажатии на кнопку "Done". Используется совместно с флагом `enableTime`.
+   */
+  onApply?: (value?: Date) => void;
 }
 
 const elementsConfig = (index: number) => {
@@ -128,12 +153,13 @@ export const DateInput = ({
   disablePast,
   minDateTime,
   maxDateTime,
-  value,
+  value: valueProp,
   onChange,
   calendarPlacement = 'bottom-start',
   style,
   className,
   doneButtonText,
+  DoneButton,
   closeOnChange = true,
   disablePickers,
   getRootRef,
@@ -168,6 +194,8 @@ export const DateInput = ({
   yearFieldTestId,
   hourFieldTestId,
   minuteFieldTestId,
+  id,
+  onApply,
   ...props
 }: DateInputProps): React.ReactNode => {
   const daysRef = React.useRef<HTMLSpanElement>(null);
@@ -175,9 +203,17 @@ export const DateInput = ({
   const yearsRef = React.useRef<HTMLSpanElement>(null);
   const hoursRef = React.useRef<HTMLSpanElement>(null);
   const minutesRef = React.useRef<HTMLSpanElement>(null);
+  const [value, setValue] = React.useState<Date | undefined>(valueProp);
 
   const maxElement = enableTime ? 4 : 2;
 
+  useIsomorphicLayoutEffect(
+    function updateLocalValue() {
+      setValue(valueProp);
+    },
+    [valueProp],
+  );
+
   const onInternalValueChange = React.useCallback(
     (internalValue: string[]) => {
       for (let i = 0; i <= maxElement; i += 1) {
@@ -236,16 +272,35 @@ export const DateInput = ({
 
   const handleRootRef = useExternRef(rootRef, getRootRef);
 
+  useIsomorphicLayoutEffect(
+    function resetValueOnCloseCalendar() {
+      if (!open) {
+        setValue(valueProp);
+      }
+    },
+    [open, valueProp],
+  );
+
   const onCalendarChange = React.useCallback(
     (value?: Date | undefined) => {
+      if (enableTime) {
+        setValue(value);
+        return;
+      }
       onChange?.(value);
-      if (closeOnChange && !enableTime) {
+      if (closeOnChange) {
         removeFocusFromField();
       }
     },
     [onChange, removeFocusFromField, closeOnChange, enableTime],
   );
 
+  const onDoneButtonClick = React.useCallback(() => {
+    onApply?.(value);
+    onChange?.(value);
+    removeFocusFromField();
+  }, [onApply, onChange, removeFocusFromField, value]);
+
   return (
     <FormField
       style={style}
@@ -267,8 +322,9 @@ export const DateInput = ({
       onFocus={callMultiple(handleFieldEnter, onFocus)}
       {...props}
     >
-      <input
-        type="hidden"
+      <VisuallyHidden
+        id={id}
+        Component="input"
         name={name}
         value={value ? format(value, enableTime ? "dd.MM.yyyy'T'HH:mm" : 'dd.MM.yyyy') : ''}
       />
@@ -348,9 +404,10 @@ export const DateInput = ({
             disablePast={disablePast}
             disableFuture={disableFuture}
             shouldDisableDate={shouldDisableDate}
-            onDoneButtonClick={removeFocusFromField}
+            onDoneButtonClick={onDoneButtonClick}
             getRootRef={calendarRef}
             doneButtonText={doneButtonText}
+            DoneButton={DoneButton}
             disablePickers={disablePickers}
             changeHoursLabel={changeHoursLabel}
             changeMinutesLabel={changeMinutesLabel}

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -33,13 +33,28 @@ const sizeYClassNames = {
 };
 
 type DateTestsProps = {
+  /**
+   * Передает атрибут `data-testid` для поля ввода дня
+   */
   day?: string;
+  /**
+   * Передает атрибут `data-testid` для поля ввода месяца
+   */
   month?: string;
+  /**
+   * Передает атрибут `data-testid` для поля ввода года
+   */
   year?: string;
 };
 
 export type DateRangeInputTestsProps = {
+  /**
+   * Передает атрибуты `data-testid` для полей ввода начальной даты
+   */
   startDateTestsProps?: DateTestsProps;
+  /**
+   * Передает атрибуты `data-testid` для полей ввода конечной даты
+   */
   endDateTestsProps?: DateTestsProps;
 };
 
@@ -66,6 +81,9 @@ export interface DateRangeInputProps
     HasRootRef<HTMLDivElement>,
     Omit<FormFieldProps, 'maxHeight'>,
     DateRangeInputTestsProps {
+  /**
+   * Передает атрибуты `data-testid` для интерактивных элементов в календаре
+   */
   calendarTestsProps?: CalendarRangeTestsProps;
   calendarPlacement?: PlacementWithAuto;
   closeOnChange?: boolean;
@@ -162,6 +180,7 @@ export const DateRangeInput = ({
   calendarTestsProps,
   startDateTestsProps,
   endDateTestsProps,
+  id,
   ...props
 }: DateRangeInputProps): React.ReactNode => {
   const daysStartRef = React.useRef<HTMLSpanElement>(null);
@@ -282,8 +301,9 @@ export const DateRangeInput = ({
       onFocus={callMultiple(handleFieldEnter, onFocus)}
       {...props}
     >
-      <input
-        type="hidden"
+      <VisuallyHidden
+        id={id}
+        Component="input"
         name={name}
         value={
           value

package/src/components/Epic/Epic.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { getNavId } from '../../lib/getNavId';
+import { getNavId, type NavIdProps } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
@@ -30,8 +30,10 @@ export const Epic = ({
 
   const story =
     (React.Children.toArray(children).find(
-      (story) => React.isValidElement(story) && getNavId(story.props, warn) === activeStory,
-    ) as React.ReactElement | undefined) ?? null;
+      (story) =>
+        React.isValidElement(story) &&
+        getNavId((story as React.ReactElement<NavIdProps>).props, warn) === activeStory,
+    ) as Array<React.ReactElement<NavIdProps>> | undefined) ?? null;
 
   return (
     <RootComponent

package/src/components/FixedLayout/FixedLayout.tsx

@@ -3,7 +3,6 @@
 import { useCallback } from 'react';
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { usePlatform } from '../../hooks/usePlatform';
 import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { useDOM } from '../../lib/dom';
@@ -92,7 +91,7 @@ export const FixedLayout = ({
   };
   React.useEffect(doResize, [colRef, platform, ref, useParentWidth]);
 
-  useGlobalEventListener(window, 'resize', doResize);
+  useResizeObserver(window, doResize);
   useResizeObserver(useParentWidth ? parentRef : colRef, doResize);
 
   return (

package/src/components/FormField/FormField.module.css

@@ -103,7 +103,7 @@
   border-radius: inherit;
 }
 
-.modeDefault .border {
+.modeDefault > .border {
   border-color: var(--vkui--color_field_border_alpha);
 }
 
@@ -115,7 +115,7 @@
   background-color: var(--vkui--color_field_background);
 }
 
-.modeDefault.hover .border {
+.modeDefault.hover > .border {
   border-color: var(--vkui--color_field_border_alpha--hover);
   z-index: var(--vkui_internal--z_index_form_field_border_hover);
 }
@@ -124,7 +124,7 @@
  * useFocusVisibleClassName()
  */
 /* increase specificity for selects */
-.focusVisible.focusVisible .border {
+.focusVisible.focusVisible > .border {
   border-color: var(--vkui--color_stroke_accent);
 }
 
@@ -134,11 +134,11 @@
  * [start]
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalFormItem--status-error) .modeDefault .border,
+:global(.vkuiInternalFormItem--status-error) .modeDefault > .border,
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalFormItem--status-error) .focusVisible .border,
-.statusError.modeDefault .border,
-.statusError.focusVisible .border {
+:global(.vkuiInternalFormItem--status-error) .focusVisible > .border,
+.statusError.modeDefault > .border,
+.statusError.focusVisible > .border {
   border-color: var(--vkui--color_stroke_negative);
   z-index: var(--vkui_internal--z_index_form_field_status);
 }
@@ -151,11 +151,11 @@
 
 /* increase specificity to cover --mode-default case */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalFormItem--status-valid) .modeDefault .border,
+:global(.vkuiInternalFormItem--status-valid) .modeDefault > .border,
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalFormItem--status-valid) .focusVisible .border,
-.statusValid.modeDefault .border,
-.statusValid.focusVisible .border {
+:global(.vkuiInternalFormItem--status-valid) .focusVisible > .border,
+.statusValid.modeDefault > .border,
+.statusValid.focusVisible > .border {
   border-color: var(--vkui--color_stroke_positive);
   z-index: var(--vkui_internal--z_index_form_field_status);
 }

package/src/components/Gallery/Gallery.tsx

@@ -4,16 +4,13 @@ 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';
+import { CarouselBase } from '../CarouselBase/CarouselBase';
+import type { BaseGalleryProps } from '../CarouselBase/types';
 import { useAutoPlay } from './hooks';
 
 export interface GalleryProps extends BaseGalleryProps {
   initialSlideIndex?: number;
   timeout?: number;
-  // Отвечает за зацикливание слайдов
-  looped?: boolean;
 }
 
 /**
@@ -25,7 +22,6 @@ export const Gallery = ({
   timeout = 0,
   onChange,
   bullets,
-  looped,
   onDragStart,
   onDragEnd,
   ...props
@@ -72,10 +68,8 @@ export const Gallery = ({
     return null;
   }
 
-  const Component = looped ? CarouselBase : BaseGallery;
-
   return (
-    <Component
+    <CarouselBase
       dragDisabled={isControlled && !onChange}
       {...props}
       onDragStart={callMultiple(onDragStart, autoPlayControls.pause)}
@@ -85,6 +79,6 @@ export const Gallery = ({
       onChange={handleChange}
     >
       {slides}
-    </Component>
+    </CarouselBase>
   );
 };

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -52,6 +52,14 @@ export interface HorizontalScrollProps
    * По умолчанию прокручивается как любой горизонтальный контент через shift.
    */
   scrollOnAnyWheel?: boolean;
+  /**
+   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента
+   */
+  prevButtonTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента
+   */
+  nextButtonTestId?: string;
 }
 
 /**
@@ -167,6 +175,8 @@ export const HorizontalScroll = ({
   scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,
   getRef,
   scrollOnAnyWheel = false,
+  prevButtonTestId,
+  nextButtonTestId,
   ...restProps
 }: HorizontalScrollProps): React.ReactNode => {
   const [canScrollLeft, setCanScrollLeft] = React.useState(false);
@@ -273,7 +283,7 @@ export const HorizontalScroll = ({
     >
       {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (
         <ScrollArrow
-          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrowLeft' : undefined}
+          data-testid={prevButtonTestId}
           size={arrowSize}
           offsetY={arrowOffsetY}
           direction="left"
@@ -286,7 +296,7 @@ export const HorizontalScroll = ({
       )}
       {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (
         <ScrollArrow
-          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrowRight' : undefined}
+          data-testid={nextButtonTestId}
           size={arrowSize}
           offsetY={arrowOffsetY}
           direction="right"

package/src/components/Image/Image.tsx

@@ -108,6 +108,7 @@ const getBorderRadiusBySizeInPx = (
 export const Image: React.FC<ImageProps> & {
   Badge: typeof ImageBadge;
   Overlay: typeof ImageBase.Overlay;
+  FloatElement: typeof ImageBase.FloatElement;
 } = ({
   size = IMAGE_DEFAULT_SIZE,
   borderRadius = 'm',
@@ -175,3 +176,6 @@ Image.Badge.displayName = 'Image.Badge';
 
 Image.Overlay = ImageBase.Overlay;
 Image.Overlay.displayName = 'Image.Overlay';
+
+Image.FloatElement = ImageBase.FloatElement;
+Image.FloatElement.displayName = 'Image.FloatElement';

package/src/components/ImageBase/ImageBase.module.css

@@ -71,6 +71,15 @@
   object-fit: scale-down;
 }
 
+.withObjectPosition {
+  --vkui_internal--ImageBase_object_position_default: 50% 50%;
+
+  object-position: var(
+    --vkui_internal--ImageBase_object_position,
+    var(--vkui_internal--ImageBase_object_position_default)
+  );
+}
+
 .loaded .img {
   visibility: visible;
 }

package/src/components/ImageBase/ImageBase.tsx

@@ -1,13 +1,27 @@
 'use client';
 
+import { useRef } from 'react';
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { mergeStyle } from '../../helpers/mergeStyle';
 import { useExternRef } from '../../hooks/useExternRef';
 import { minOr } from '../../lib/comparing';
 import { getFetchPriorityProp } from '../../lib/utils';
-import type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';
+import type {
+  AnchorHTMLAttributesOnly,
+  CSSCustomProperties,
+  HasRef,
+  HasRootRef,
+  LiteralUnion,
+} from '../../types';
 import { Clickable } from '../Clickable/Clickable';
 import { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';
+import {
+  type FloatElementIndentation,
+  type FloatElementPlacement,
+  ImageBaseFloatElement,
+  type ImageBaseFloatElementProps,
+} from './ImageBaseFloatElement/ImageBaseFloatElement';
 import { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';
 import { ImageBaseContext } from './context';
 import type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';
@@ -20,6 +34,9 @@ export type {
   ImageBaseBadgeProps,
   ImageBaseOverlayProps,
   ImageBaseContextProps,
+  ImageBaseFloatElementProps,
+  FloatElementPlacement,
+  FloatElementIndentation,
 };
 
 export {
@@ -84,6 +101,11 @@ export interface ImageBaseProps
    * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)
    */
   objectFit?: React.CSSProperties['objectFit'];
+  /**
+   * Пользовательское значения стиля object-position
+   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-position)
+   */
+  objectPosition?: React.CSSProperties['objectPosition'];
   /**
    * Флаг для сохранения пропорций картинки.
    * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки
@@ -125,6 +147,7 @@ const sizeToNumber = (size: number | string | undefined): number | undefined =>
 export const ImageBase: React.FC<ImageBaseProps> & {
   Badge: typeof ImageBaseBadge;
   Overlay: typeof ImageBaseOverlay;
+  FloatElement: typeof ImageBaseFloatElement;
 } = ({
   alt,
   crossOrigin,
@@ -149,10 +172,13 @@ export const ImageBase: React.FC<ImageBaseProps> & {
   onError,
   withTransparentBackground,
   objectFit = 'cover',
+  objectPosition,
   keepAspectRatio = false,
+  getRootRef,
   ...restProps
 }: ImageBaseProps) => {
   const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);
+  const wrapperRef = useExternRef(getRootRef);
 
   const width = widthSize ?? (keepAspectRatio ? undefined : size);
   const height = heightSize ?? (keepAspectRatio ? undefined : size);
@@ -160,6 +186,9 @@ export const ImageBase: React.FC<ImageBaseProps> & {
   const [loaded, setLoaded] = React.useState(false);
   const [failed, setFailed] = React.useState(false);
 
+  const mouseOverHandlersRef = useRef<VoidFunction[]>([]);
+  const mouseOutHandlersRef = useRef<VoidFunction[]>([]);
+
   const hasSrc = src || srcSet;
   const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);
 
@@ -205,8 +234,38 @@ export const ImageBase: React.FC<ImageBaseProps> & {
     [imgRef, loaded],
   );
 
+  const onMouseOver = () => {
+    mouseOverHandlersRef.current.forEach((fn) => fn());
+  };
+
+  const onMouseOut = () => {
+    mouseOutHandlersRef.current.forEach((fn) => fn());
+  };
+
+  const contextValue = React.useMemo(
+    () => ({
+      size,
+      onMouseOverHandlers: mouseOverHandlersRef.current,
+      onMouseOutHandlers: mouseOutHandlersRef.current,
+    }),
+    [size],
+  );
+
+  const imgStyles: CSSCustomProperties<string | number> | undefined = objectPosition
+    ? {
+        '--vkui_internal--ImageBase_object_position': objectPosition,
+      }
+    : undefined;
+
+  const keepAspectRationStyles = keepAspectRatio
+    ? {
+        width: widthImg || width,
+        height: heightImg || height,
+      }
+    : undefined;
+
   return (
-    <ImageBaseContext.Provider value={{ size }}>
+    <ImageBaseContext.Provider value={contextValue}>
       <Clickable
         baseStyle={{ width, height }}
         baseClassName={classNames(
@@ -214,6 +273,9 @@ export const ImageBase: React.FC<ImageBaseProps> & {
           loaded && styles.loaded,
           withTransparentBackground && styles.transparentBackground,
         )}
+        getRootRef={wrapperRef}
+        onMouseOver={onMouseOver}
+        onMouseOut={onMouseOut}
         {...restProps}
       >
         {hasSrc && (
@@ -223,20 +285,14 @@ export const ImageBase: React.FC<ImageBaseProps> & {
             className={classNames(
               styles.img,
               getObjectFitClassName(objectFit),
+              objectPosition && styles.withObjectPosition,
               keepAspectRatio && styles.imgKeepRatio,
             )}
             crossOrigin={crossOrigin}
             decoding={decoding}
             loading={loading}
             referrerPolicy={referrerPolicy}
-            style={
-              keepAspectRatio
-                ? {
-                    width: widthImg || width,
-                    height: heightImg || height,
-                  }
-                : undefined
-            }
+            style={mergeStyle(keepAspectRationStyles, imgStyles)}
             sizes={sizes}
             src={src}
             srcSet={srcSet}
@@ -263,3 +319,6 @@ ImageBase.Badge.displayName = 'ImageBase.Badge';
 
 ImageBase.Overlay = ImageBaseOverlay;
 ImageBase.Overlay.displayName = 'ImageBase.Overlay';
+
+ImageBase.FloatElement = ImageBaseFloatElement;
+ImageBase.FloatElement.displayName = 'ImageBase.FloatElement';