@vkontakte/vkui 7.0.0 → 7.1.0

package/src/components/{BaseGallery/CarouselBase → CarouselBase}/helpers.ts

@@ -1,6 +1,24 @@
-import type { GallerySlidesState } from '../types';
+import { type AlignType } from '../../types';
 import { SLIDE_THRESHOLD } from './constants';
-import type { LoopPoint, SlidesManagerState } from './types';
+import {
+  type GallerySlidesState,
+  type LayoutState,
+  type LoopPoint,
+  type SlidesManagerState,
+} from './types';
+
+const validateIndent = (slidesManager: SlidesManagerState, value: number) => {
+  const localMax = slidesManager.max ?? 0;
+  const localMin = slidesManager.min ?? 0;
+
+  if (value < localMin) {
+    return localMin;
+  } else if (value > localMax) {
+    return localMax;
+  }
+
+  return value;
+};
 
 /*
  * Считает отступ слоя галереи
@@ -8,7 +26,8 @@ import type { LoopPoint, SlidesManagerState } from './types';
 export function calculateIndent(
   targetIndex: number,
   slidesManager: SlidesManagerState,
-  isCenterWithCustomWidth: boolean,
+  isCenter: boolean,
+  looped = false,
 ): number {
   if (slidesManager.isFullyVisible || !slidesManager.slides.length) {
     return 0;
@@ -19,11 +38,11 @@ export function calculateIndent(
   if (targetSlide) {
     const { coordX, width } = targetSlide;
 
-    if (isCenterWithCustomWidth) {
-      return slidesManager.viewportOffsetWidth / 2 - coordX - width / 2;
+    if (isCenter) {
+      return slidesManager.containerWidth / 2 - coordX - width / 2;
     }
-
-    return -1 * coordX;
+    const indent = -1 * coordX;
+    return looped ? indent : validateIndent(slidesManager, indent);
   }
 
   return 0;
@@ -109,6 +128,7 @@ export function getTargetIndex(
   slideIndex: number,
   currentShiftX: number,
   currentShiftXDelta: number,
+  looped = false,
 ): number {
   const shift = currentShiftX + currentShiftXDelta;
   const direction = currentShiftXDelta < 0 ? 1 : -1;
@@ -130,6 +150,10 @@ export function getTargetIndex(
       }
       return targetIndex;
     }
+    if (!looped) {
+      return direction < 0 ? Math.max(targetIndex, 0) : Math.min(targetIndex, slides.length - 1);
+    }
+
     return direction < 0
       ? (targetSlide + slides.length) % slides.length
       : targetSlide % slides.length;
@@ -137,3 +161,39 @@ export function getTargetIndex(
 
   return targetIndex;
 }
+
+interface CalcMin extends Partial<LayoutState> {
+  align: AlignType;
+}
+
+export const calcMin = ({
+  containerWidth = 0,
+  layerWidth = 0,
+  slides = [],
+  viewportOffsetWidth = 0,
+  align,
+}: CalcMin): number => {
+  switch (align) {
+    case 'left':
+      return containerWidth - layerWidth;
+    case 'right':
+      return viewportOffsetWidth - layerWidth;
+    case 'center':
+      const { coordX, width } = slides[slides.length - 1];
+      return containerWidth / 2 - coordX - width / 2;
+    default:
+      throw new Error(`unknown align ${align}`);
+  }
+};
+
+interface CalcMax extends Partial<LayoutState> {
+  isCenterAlign: boolean;
+}
+
+export const calcMax = ({ slides = [], containerWidth = 0, isCenterAlign }: CalcMax): number => {
+  if (isCenterAlign && slides.length) {
+    const { width, coordX } = slides[0];
+    return containerWidth / 2 - coordX - width / 2;
+  }
+  return 0;
+};

package/src/components/{BaseGallery/CarouselBase → CarouselBase}/hooks.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { animate, type DrawInterface } from '../../../lib/animate';
-import { cubicBezier } from '../../../lib/fx';
+import { animate, type DrawInterface } from '../../lib/animate';
+import { cubicBezier } from '../../lib/fx';
 import { ANIMATION_DURATION } from './constants';
 
 const TIMING_FUNCTION = cubicBezier(0.8, 1);

package/src/components/CarouselBase/types.ts

@@ -0,0 +1,135 @@
+import type * as React from 'react';
+import type { HasAlign, HasRef, HTMLAttributesWithRootRef } from '../../types';
+import type { ScrollArrowProps } from '../ScrollArrow/ScrollArrow';
+import type { CustomTouchEvent, CustomTouchEventHandler } from '../Touch/Touch';
+import { type BulletsTestIds } from './Bullets';
+import { type ScrollArrowsTestIds } from './ScrollArrows';
+
+export interface GallerySlidesState {
+  coordX: number;
+  width: number;
+}
+
+export interface LayoutState {
+  containerWidth: number;
+  viewportOffsetWidth: number;
+  layerWidth: number;
+  min?: number;
+  max: number;
+  slides: GallerySlidesState[];
+  isFullyVisible: boolean;
+}
+
+export interface LoopPoint {
+  /**
+   * Индекс слайда
+   */
+  index: number;
+  /**
+   * Функция, которая по текущему сдвигу галереи определяет нужный сдвиг слайда
+   */
+  target: (this: void, location: number) => void;
+}
+
+export interface ControlElementsState {
+  /**
+   * Отвечает за отображение стрелки влево
+   */
+  canSlideLeft: boolean;
+  /**
+   * Отвечает за отображение стрелки вправо
+   */
+  canSlideRight: boolean;
+  /**
+   * Возможность листать слайды drag'ом
+   */
+  isDraggable: boolean;
+}
+
+export interface SlidesManagerState {
+  /**
+   * Общая ширина всех слайдов
+   */
+  contentSize: number;
+  /**
+   * Массив с пограничными точками слайдов, которые необходимо смещать, чтобы они всегда были в области видимости
+   * (пример: для последнего слайда это n-первых слайдов, необходимых для заполнения оставшейся ширины,
+   * или для первого слайда это n-последних слайдов при выравнивании по центру)
+   */
+  loopPoints: LoopPoint[];
+  /**
+   * Массив с правыми границами слайдов
+   */
+  snaps: number[];
+  /**
+   * Ширина видимой области слайдов
+   */
+  viewportOffsetWidth: number;
+  /**
+   * Массив слайдов с координатой начала слайда и шириной
+   */
+  slides: GallerySlidesState[];
+  /**
+   * Все слайды видимы без скрола
+   */
+  isFullyVisible: boolean;
+  min: number | null;
+  max: number | null;
+  containerWidth: number;
+  layerWidth: number;
+}
+
+export interface BaseGalleryProps
+  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'onDragStart' | 'onDragEnd'>,
+    HasAlign,
+    HasRef<HTMLElement>,
+    BulletsTestIds,
+    ScrollArrowsTestIds {
+  slideWidth?: string | number;
+  slideIndex?: number;
+  onDragStart?: CustomTouchEventHandler;
+  onDragEnd?: (e: CustomTouchEvent, targetIndex: number) => void;
+  onChange?: (current: number) => void;
+  /**
+   * Будет вызвано при клике на кнопку-стрелку влево
+   */
+  onPrevClick?: (event: React.MouseEvent) => void;
+  /**
+   * Будет вызвано при клике на кнопку-стрелку вправо
+   */
+  onNextClick?: (event: React.MouseEvent) => void;
+  bullets?: 'dark' | 'light' | false;
+  /**
+   * Позволяет отключить реагирование на тач-события
+   */
+  dragDisabled?: boolean;
+  showArrows?: boolean;
+  /**
+   * Управление размером кликабельной зоны стрелок. В дизайне свойство называется `arrowArea`
+   */
+  arrowAreaHeight?: 'stretch' | 'fit';
+  hasPointer?: boolean;
+  arrowSize?: ScrollArrowProps['size'];
+  /**
+   * Текст для кнопки-стрелки влево (назад). Делает ее доступной для ассистивных технологий
+   */
+  arrowPrevLabel?: string;
+  /**
+   * Текст для кнопки-стрелки вправо (вперед). Делает ее доступной для ассистивных технологий
+   */
+  arrowNextLabel?: string;
+  /**
+   * Передает атрибут `data-testid` для слайда
+   */
+  slideTestId?: (index: number) => string;
+  /**
+   * Включает зацикленность слайдов
+   */
+  looped?: boolean;
+  /**
+   * Тип источника для отслеживания размера:
+   * - `window`: пересчет позиции слайдов будет происходить при изменении размеров `window`
+   * - `element`: пересчет позиции слайдов будет происходить при изменении размеров компонента
+   */
+  resizeSource?: 'window' | 'element';
+}

package/src/components/ChipsInput/ChipsInput.tsx

@@ -9,7 +9,7 @@ import { useChipsInput, type UseChipsInputProps } from './useChipsInput';
 export interface ChipsInputProps<Option extends ChipOption>
   extends ChipsInputBaseProps<Option>,
     UseChipsInputProps<Option>,
-    Pick<FormFieldProps, 'status' | 'mode' | 'before' | 'after'> {
+    Pick<FormFieldProps, 'status' | 'mode' | 'before' | 'after' | 'maxHeight'> {
   /**
    * Если `true`, то справа будет отображаться кнопка для очистки значения
    */

package/src/components/ChipsInput/useChipsInput.ts

@@ -84,7 +84,7 @@ export const useChipsInput = <O extends ChipOption>({
   addOptionFromInput: (inputValue: string) => void;
   removeOption: (newValue: O | ChipOptionValue) => void;
   clearOptions: () => void;
-  inputRef: React.RefObject<HTMLInputElement & SimulateReactInputTargetState>;
+  inputRef: React.RefObject<(HTMLInputElement & SimulateReactInputTargetState) | null>;
   inputValue: string;
   onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => any;
   clearInput: () => void;
@@ -96,7 +96,7 @@ export const useChipsInput = <O extends ChipOption>({
     onChange,
   });
 
-  const inputRef = React.useRef<HTMLInputElement & SimulateReactInputTargetState>(null);
+  const inputRef = React.useRef<(HTMLInputElement & SimulateReactInputTargetState) | null>(null);
   const [inputValue, setInputChange] = useEnsuredControl({
     disabled,
     value: inputValueProp,

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -95,7 +95,7 @@ export interface ChipsSelectProps<O extends ChipOption>
    */
   forceDropdownPortal?: boolean;
   /**
-   * Передача `data-testid`.
+   * Передает атрибут `data-testid` для дропдауна.
    */
   dropdownTestId?: string;
   /**

package/src/components/ChipsSelect/useChipsSelect.ts

@@ -97,7 +97,7 @@ export const useChipsSelect = <O extends ChipOption>({
   addOptionFromInput: (inputValue: string) => void;
   removeOption: (newValue: ChipOptionValue | O) => void;
   clearOptions: () => void;
-  inputRef: React.RefObject<HTMLInputElement & SimulateReactInputTargetState>;
+  inputRef: React.RefObject<(HTMLInputElement & SimulateReactInputTargetState) | null>;
   clearInput: () => void;
 } => {
   const { value, inputValue, onInputChange, ...restChipsInputProps } = useChipsInput({

package/src/components/Clickable/useState.tsx

@@ -142,7 +142,7 @@ interface UseActiveProps extends Pick<StateProps, 'activated' | 'activeEffectDel
   /**
    * Блокирование активации состояний
    */
-  lockStateRef: React.MutableRefObject<boolean>;
+  lockStateRef: React.RefObject<boolean>;
   setParentStateLock: (v: boolean) => void;
 }
 
@@ -245,7 +245,7 @@ function useLockState(
 
 function useLockRef(
   setParentStateLockBubbling: (v: boolean) => void,
-): readonly [React.MutableRefObject<boolean>, (v: boolean) => void, (...args: any[]) => void] {
+): readonly [React.RefObject<boolean>, (v: boolean) => void, (...args: any[]) => void] {
   const lockStateRef = React.useRef(false);
 
   const setStateLockBubblingImmediate = React.useCallback(

package/src/components/Clickable/useStateWithDelay.tsx

@@ -41,7 +41,7 @@ export function useStateWithDelay<S>(
   onStateChange: (v: S) => void = noop,
 ): [S, DispatchWithDelay<React.SetStateAction<S>>] {
   const [value, setValue] = React.useState(initialState);
-  const timeout = React.useRef<ReturnType<typeof setTimeout>>();
+  const timeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
 
   const handleSetValue = React.useCallback(
     (nextValue: React.SetStateAction<S>) => {

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -9,6 +9,7 @@ import {
   ConfigProviderContext,
   type ConfigProviderContextInterface,
   useConfigProvider,
+  useConfigProviderContextMemo,
 } from './ConfigProviderContext';
 
 export interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {
@@ -22,50 +23,22 @@ export const ConfigProvider = (propsRaw: ConfigProviderProps): React.ReactNode =
   const props = excludeKeysWithUndefined(propsRaw);
   const parentConfig = useConfigProvider();
 
-  const {
-    children,
-    hasCustomPanelHeaderAfter,
-    customPanelHeaderAfterMinWidth,
-    isWebView,
-    transitionMotionEnabled,
-    platform,
-    locale,
-    colorScheme: colorSchemeProp,
-    tokensClassNames,
-  } = {
+  const mergeProps = {
     ...parentConfig,
     ...props,
   };
 
-  const colorScheme = useAutoDetectColorScheme(colorSchemeProp);
+  const colorScheme = useAutoDetectColorScheme(mergeProps.colorScheme);
 
-  const configContext = React.useMemo(
-    () => ({
-      hasCustomPanelHeaderAfter,
-      customPanelHeaderAfterMinWidth,
-      isWebView,
-      transitionMotionEnabled,
-      platform,
-      locale,
-      tokensClassNames,
-      colorScheme,
-    }),
-    [
-      colorScheme,
-      customPanelHeaderAfterMinWidth,
-      hasCustomPanelHeaderAfter,
-      isWebView,
-      locale,
-      platform,
-      tokensClassNames,
-      transitionMotionEnabled,
-    ],
-  );
+  const configContext = useConfigProviderContextMemo({
+    ...mergeProps,
+    colorScheme,
+  });
 
   return (
     <ConfigProviderContext.Provider value={configContext}>
       <IconAppearanceProvider value={colorScheme}>
-        <TokensClassProvider>{children}</TokensClassProvider>
+        <TokensClassProvider>{mergeProps.children}</TokensClassProvider>
       </IconAppearanceProvider>
     </ConfigProviderContext.Provider>
   );

package/src/components/ConfigProvider/ConfigProviderContext.tsx

@@ -88,3 +88,39 @@ export const ConfigProviderContext: React.Context<ConfigProviderContextInterface
 
 export const useConfigProvider = (): ConfigProviderContextInterface =>
   React.useContext(ConfigProviderContext);
+
+export function useConfigProviderContextMemo(config: ConfigProviderContextInterface) {
+  const {
+    isWebView,
+    hasCustomPanelHeaderAfter,
+    customPanelHeaderAfterMinWidth,
+    colorScheme,
+    transitionMotionEnabled,
+    platform,
+    tokensClassNames,
+    locale,
+  } = config;
+
+  return React.useMemo<ConfigProviderContextInterface>(
+    () => ({
+      isWebView,
+      hasCustomPanelHeaderAfter,
+      customPanelHeaderAfterMinWidth,
+      colorScheme,
+      transitionMotionEnabled,
+      platform,
+      tokensClassNames,
+      locale,
+    }),
+    [
+      isWebView,
+      hasCustomPanelHeaderAfter,
+      customPanelHeaderAfterMinWidth,
+      colorScheme,
+      transitionMotionEnabled,
+      platform,
+      tokensClassNames,
+      locale,
+    ],
+  );
+}

package/src/components/ConfigProvider/ConfigProviderOverride.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { useObjectMemo } from '../../hooks/useObjectMemo';
 import {
   ConfigProviderContext,
   type ConfigProviderContextInterface,
   useConfigProvider,
+  useConfigProviderContextMemo,
 } from './ConfigProviderContext';
 
 export interface ConfigProviderOverrideProps extends Partial<ConfigProviderContextInterface> {
@@ -21,10 +21,7 @@ export function ConfigProviderOverride({
 }: ConfigProviderOverrideProps): React.ReactNode {
   const parentConfig = useConfigProvider();
 
-  const configContext = useObjectMemo({
-    ...parentConfig,
-    ...contextValue,
-  });
+  const configContext = useConfigProviderContextMemo({ ...parentConfig, ...contextValue });
 
   return (
     <ConfigProviderContext.Provider value={configContext}>

package/src/components/ContentCard/ContentCard.module.css

@@ -11,6 +11,7 @@
   border-radius: var(--vkui--size_card_border_radius--regular);
   text-decoration: none;
   color: var(--vkui--color_text_primary);
+  block-size: 100%;
   display: block;
 }
 

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

@@ -50,14 +50,18 @@
   }
 }
 
-.boxOverscrollBehaviorContain {
+.overscrollBehaviorContain {
   overscroll-behavior: contain;
 }
 
-.boxOverscrollBehaviorNone {
+.overscrollBehaviorNone {
   overscroll-behavior: none;
 }
 
+.scrollBehaviorSmooth {
+  scroll-behavior: smooth;
+}
+
 .horizontalScrollEnabled {
   overflow-x: auto;
 }

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -7,8 +7,13 @@ import styles from './CustomScrollView.module.css';
 
 const overscrollBehaviorClassNames = {
   auto: undefined,
-  contain: styles.boxOverscrollBehaviorContain,
-  none: styles.boxOverscrollBehaviorNone,
+  contain: styles.overscrollBehaviorContain,
+  none: styles.overscrollBehaviorNone,
+};
+
+const scrollBehaviorClassNames = {
+  auto: undefined,
+  smooth: styles.scrollBehaviorSmooth,
 };
 
 export interface CustomScrollViewProps
@@ -21,6 +26,10 @@ export interface CustomScrollViewProps
    * Поведение overscroll, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)
    */
   overscrollBehavior?: 'auto' | 'contain' | 'none';
+  /**
+   * Поведение scroll-behavior, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)
+   */
+  scrollBehavior?: 'auto' | 'smooth';
   /**
    * Включение отображения горизонтального скролла
    */
@@ -43,6 +52,7 @@ export const CustomScrollView = ({
   onScroll,
   getRootRef,
   overscrollBehavior = 'auto',
+  scrollBehavior = 'auto',
   scrollbarHidden = false,
   ...restProps
 }: CustomScrollViewProps): React.ReactNode => {
@@ -53,6 +63,7 @@ export const CustomScrollView = ({
         styles.host,
         enableHorizontalScroll && styles.horizontalScrollEnabled,
         overscrollBehaviorClassNames[overscrollBehavior],
+        scrollBehaviorClassNames[scrollBehavior],
         scrollbarHidden && styles.scrollbarHidden,
       )}
       ref={getRootRef}

package/src/components/CustomSelect/CustomSelect.tsx

@@ -5,6 +5,7 @@ import { classNames, debounce } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useFocusWithin } from '../../hooks/useFocusWithin';
+import { callMultiple } from '../../lib/callMultiple';
 import { useDOM } from '../../lib/dom';
 import type { Placement } from '../../lib/floating';
 import { defaultFilterFn, type FilterFn } from '../../lib/select';
@@ -221,7 +222,7 @@ export interface SelectProps<
    */
   allowClearButton?: boolean;
   /**
-   * (e2e) testId кнопки очистки
+   * Передает атрибут `data-testid` для кнопки очистки
    */
   clearButtonTestId?: string;
   /**
@@ -239,10 +240,14 @@ export interface SelectProps<
    */
   noMaxHeight?: boolean;
   /**
-   * (e2e) testId элемента, внутри которого отображается текст выбранной опции `CustomSelect` или плейсхолдер.
+   * Передает атрибут `data-testid` для элемента, внутри которого отображается текст выбранной опции `CustomSelect` или плейсхолдер.
    */
   labelTextTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для нативного элемента `select`.
+   */
   nativeSelectTestId?: string;
+  onInputKeyDown?: (e: React.KeyboardEvent) => void;
 }
 
 type MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;
@@ -289,6 +294,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     required,
     getSelectInputRef,
     overscrollBehavior,
+    onInputKeyDown,
     ...restProps
   } = props;
 
@@ -555,7 +561,9 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
           : optionsProp;
 
       setOptions(options);
-      setSelectedOptionIndex(findSelectedIndex(options, value));
+      const selectedIndex = findSelectedIndex(options, value);
+      setSelectedOptionIndex(selectedIndex);
+      setFocusedOptionIndex(selectedIndex);
     },
     [filterFn, inputValue, nativeSelectValue, optionsProp, defaultValue, props.value, searchable],
   );
@@ -885,7 +893,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
         fetching={fetching}
         value={inputValue}
         onKeyUp={handleKeyUp}
-        onKeyDown={handleKeyDownSelect}
+        onKeyDown={callMultiple(handleKeyDownSelect, onInputKeyDown)}
         onChange={onInputChange}
         onClick={onClick}
         before={before}

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -11,7 +11,7 @@ export interface CustomSelectDropdownProps
   extends HTMLAttributesWithRootRef<HTMLDivElement>,
     Pick<CustomScrollViewProps, 'overscrollBehavior'>,
     HasDataAttribute {
-  targetRef: React.RefObject<HTMLElement>;
+  targetRef: React.RefObject<HTMLElement | null>;
   placement?: Placement;
   scrollBoxRef?: React.Ref<HTMLDivElement>;
   fetching?: boolean;