@vkontakte/vkui 7.2.1 → 7.3.1

package/src/components/CalendarRange/CalendarRange.tsx

@@ -14,7 +14,9 @@ import {
 } from 'date-fns';
 import { useCalendar } from '../../hooks/useCalendar';
 import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
-import { isFirstDay, isLastDay, navigateDate } from '../../lib/calendar';
+import { Keys, pressedKey } from '../../lib/accessibility';
+import { isFirstDay, isLastDay, navigateDate, NAVIGATION_KEYS } from '../../lib/calendar';
+import { isHTMLElement } from '../../lib/dom';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import {
   CalendarDays,
@@ -33,11 +35,11 @@ export type DateRangeType = [Date | null, Date | null];
 
 export type CalendarRangeTestsProps = CalendarDaysTestsProps & {
   /**
-   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в левой части
+   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в левой части.
    */
   leftPartHeaderTestsData?: CalendarHeaderTestsProps;
   /**
-   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в правой части
+   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в правой части.
    */
   rightPartHeaderTestsData?: CalendarHeaderTestsProps;
 };
@@ -55,15 +57,47 @@ export interface CalendarRangeProps
     >,
     Pick<CalendarDaysProps, 'listenDayChangesForUpdate' | 'renderDayContent'>,
     CalendarRangeTestsProps {
+  /**
+   * Текущий выбранный промежуток.
+   */
   value?: DateRangeType | null;
+  /**
+   * Начальный промежуток при монтировании.
+   */
   defaultValue?: DateRangeType | null;
+  /**
+   * Запрещает выбор даты в прошлом.
+   * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.
+   */
   disablePast?: boolean;
+  /**
+   * Запрещает выбор даты в будущем.
+   * Применяется, если не задано `shouldDisableDate`.
+   */
   disableFuture?: boolean;
+  /**
+   * Отключает селекторы выбора месяца/года.
+   */
   disablePickers?: boolean;
+  /**
+   * `aria-label` для изменения дня.
+   */
   changeDayLabel?: string;
+  /**
+   * День недели, с которого начинается неделя.
+   */
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  /**
+   * Обработчик изменения выбранного промежутка.
+   */
   onChange?: (value: DateRangeType | undefined) => void; // TODO [>=8]: поменять тип на `(value?: DateRangeType | null) => void`
+  /**
+   * Функция для проверки запрета выбора даты.
+   */
   shouldDisableDate?: (value: Date) => boolean;
+  /**
+   * @deprecated Свойство не используется.
+   */
   onClose?: () => void;
 }
 
@@ -85,7 +119,6 @@ export const CalendarRange = ({
   disablePast,
   disableFuture,
   shouldDisableDate,
-  onClose,
   weekStartsOn = 1,
   disablePickers,
   prevMonthLabel = 'Предыдущий месяц',
@@ -133,20 +166,28 @@ export const CalendarRange = ({
 
   const handleKeyDown = React.useCallback(
     (event: React.KeyboardEvent) => {
-      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      const key = pressedKey(event);
+
+      if (key && NAVIGATION_KEYS.includes(key)) {
         event.preventDefault();
-      }
 
-      const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.key);
+        const newFocusedDay = navigateDate(focusedDay ?? value?.[1], key);
 
-      if (
-        newFocusedDay &&
-        !isSameMonth(newFocusedDay, viewDate) &&
-        !isSameMonth(newFocusedDay, addMonths(viewDate, 1))
-      ) {
-        setViewDate(newFocusedDay);
+        if (
+          newFocusedDay &&
+          !isSameMonth(newFocusedDay, viewDate) &&
+          !isSameMonth(newFocusedDay, addMonths(viewDate, 1))
+        ) {
+          setViewDate(newFocusedDay);
+        }
+        setFocusedDay(newFocusedDay);
+        return;
+      }
+
+      if ((key === Keys.ENTER || key === Keys.SPACE) && isHTMLElement(event.target)) {
+        event.preventDefault();
+        event.target.click?.();
       }
-      setFocusedDay(newFocusedDay);
     },
     [focusedDay, setFocusedDay, setViewDate, value, viewDate],
   );

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./CalendarTime.module.css"],"names":["host","host__withoutDone","picker","divider","button"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAKAC,mB,WALA;AAAA,E,aASAC,Q,WATA;AAAA,E,aAaAC,S,WAbA;AAAA,E,aAmBAC,Q,WAnBA;AAAA;AAAA","file":"CalendarTime.module.css.d.ts","sourceRoot":""}

package/src/components/CalendarTime/CalendarTime.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { setHours, setMinutes } from 'date-fns';
 import { Keys, pressedKey } from '../../lib/accessibility';
+import { callMultiple } from '../../lib/callMultiple';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import { Button, type ButtonProps } from '../Button/Button';
 import { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';
@@ -14,35 +15,62 @@ const selectFilterFn = () => true;
 
 export type CalendarTimeTestsProps = {
   /**
-   * Передает атрибут `data-testid` для дропдауна выбора часа в календаре
+   * Передает атрибут `data-testid` для дропдауна выбора часа в календаре.
    */
   hoursTestId?: string;
   /**
-   * Передает атрибут `data-testid` для дропдауна выбора минут в календаре
+   * Передает атрибут `data-testid` для дропдауна выбора минут в календаре.
    */
   minutesTestId?: string;
   /**
-   * Передает атрибут `data-testid` для кнопки "Готово" в календаре
+   * Передает атрибут `data-testid` для кнопки "Готово" в календаре.
    */
   doneButtonTestId?: string;
 };
 
 export type CalendarDoneButtonProps = {
   /**
-   * Кастомное отображение кнопки Done.
+   * Кастомное отображение кнопки `"Done"`.
    */
   DoneButton?: React.ComponentType<ButtonProps>;
+  /**
+   * Текст отображаемый в кнопке `"Done"`.
+   */
   doneButtonText?: string;
+  /**
+   * Управление отображением кнопки `"Done"`.
+   */
   doneButtonShow?: boolean;
+  /**
+   * Блокировка взаимодействия с кнопкой "Done".
+   */
   doneButtonDisabled?: boolean;
+  /**
+   * Обработки нажатия на кнопку `"Done"`.
+   */
   onDoneButtonClick?: () => void;
 };
 
 export interface CalendarTimeProps extends CalendarTimeTestsProps, CalendarDoneButtonProps {
+  /**
+   * Отображаемая дата.
+   */
   value: Date;
+  /**
+   * Текст выпадающего списка с выбором часов. Делает его доступным для ассистивных технологий.
+   */
   changeHoursLabel?: string;
+  /**
+   * Текст выпадающего списка с выбором минут. Делает его доступным для ассистивных технологий.
+   */
   changeMinutesLabel?: string;
+  /**
+   * Обработчик изменения времени.
+   */
   onChange?: (value: Date) => void;
+  /**
+   * Функция для проверки блокировки выбора даты и времени.
+   */
   isDayDisabled?: (day: Date, withTime?: boolean) => boolean;
 }
 
@@ -159,6 +187,20 @@ export const CalendarTime = ({
     }
   };
 
+  const stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback(
+    (event: React.KeyboardEvent, isOpen: boolean) => {
+      if (isOpen && event.key === 'Escape') {
+        event.stopPropagation();
+      }
+    },
+    [],
+  );
+
+  const onSelectInputKeyDown = callMultiple(
+    onPickerKeyDown,
+    stopPropogationOfEscapeKeyboardEventWhenSelectIsOpen,
+  );
+
   const renderDoneButton = () => {
     const ButtonComponent = DoneButton ?? Button;
     return (
@@ -188,7 +230,7 @@ export const CalendarTime = ({
             searchable
             filterFn={selectFilterFn}
             onInputChange={onHoursInputChange}
-            onInputKeyDown={onPickerKeyDown}
+            onInputKeyDown={onSelectInputKeyDown}
             getSelectInputRef={hoursInputRef}
             aria-label={changeHoursLabel}
             data-testid={hoursTestId}
@@ -207,7 +249,7 @@ export const CalendarTime = ({
             filterFn={selectFilterFn}
             onInputChange={onMinutesInputChange}
             getSelectInputRef={minutesInputRef}
-            onInputKeyDown={onPickerKeyDown}
+            onInputKeyDown={onSelectInputKeyDown}
             aria-label={changeMinutesLabel}
             data-testid={minutesTestId}
           />

package/src/components/Card/Card.module.css

@@ -9,8 +9,8 @@
 .modeShadow {
   box-shadow: var(
     --vkui--elevation3,
-    0 2px 24px 0 rgba(0, 0, 0, 0.08),
-    0 0 2px 0 rgba(0, 0, 0, 0.08)
+    0 2px 24px 0 rgb(0, 0, 0, 0.08),
+    0 0 2px 0 rgb(0, 0, 0, 0.08)
   );
 }
 

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./Card.module.css"],"names":["host","modeShadow","modeOutline","modePlain","withBorder"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAQAC,Y,WARA;AAAA,E,aAgBAA,Y,WAhBA;AAAA,E,aAiBAC,a,WAjBA;AAAA,E,aAkBAC,W,WAlBA;AAAA,E,aAsBAC,Y,WAtBA;AAAA,E,aAyCiCJ,M,WAzCjC;AAAA,E,aA+CiCA,M,WA/CjC;AAAA,E,aAoDyCA,M,WApDzC;AAAA,E,aAyDyCA,M,WAzDzC;AAAA,E,aA8DyCA,M,WA9DzC;AAAA,E,aAyEgFA,M,WAzEhF;AAAA,E,aA4EEA,M,WA5EF;AAAA,E,aAsFMA,M,WAtFN;AAAA,E,aA8FgFA,M,WA9FhF;AAAA,E,aAiGEA,M,WAjGF;AAAA,E,aA0GMA,M,WA1GN;AAAA,E,aAiHMA,M,WAjHN;AAAA,E,aAqHkFA,M,WArHlF;AAAA,E,aAiI+BA,M,WAjI/B;AAAA,E,aAsIuCA,M,WAtIvC;AAAA,E,aA4IuCA,M,WA5IvC;AAAA,E,aAiJuCA,M,WAjJvC;AAAA,E,aAsJuCA,M,WAtJvC;AAAA,E,aA2JuCA,M,WA3JvC;AAAA,E,aAgKuCA,M,WAhKvC;AAAA,E,aAqKuCA,M,WArKvC;AAAA,E,aA0KuCA,M,WA1KvC;AAAA;AAAA","file":"Card.module.css.d.ts","sourceRoot":""}

package/src/components/Card/Card.tsx

@@ -4,6 +4,9 @@ import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Card.module.css';
 
 export interface CardProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent {
+  /**
+   * Внешний вид карточки.
+   */
   mode?: 'tint' | 'shadow' | 'outline' | 'outline-tint' | 'plain';
 }
 

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./CardGrid.module.css"],"names":["host","padding","sizeXCompact","sizeXNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAUAC,S,WAVA;AAAA,E,aAeAC,c,WAfA;AAAA,E,aAoBEC,W,WApBF;AAAA,E,aAyBAH,M,WAzBA;AAAA,E,aAyBQA,M,WAzBR;AAAA,E,aAmCuCA,M,WAnCvC;AAAA,E,aAyCyCA,M,WAzCzC;AAAA,E,aA+C4BA,M,WA/C5B;AAAA,E,aAoD4BA,M,WApD5B;AAAA;AAAA","file":"CardGrid.module.css.d.ts","sourceRoot":""}

package/src/components/CardGrid/CardGrid.tsx

@@ -18,9 +18,12 @@ const stylesSize = {
 };
 
 export interface CardGridProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent {
+  /**
+   * Размер карточек.
+   */
   size?: 's' | 'm' | 'l';
   /**
-   * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа
+   * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа.
    */
   padding?: boolean;
 }

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./CardScroll.module.css"],"names":["host","in","withPaddings"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,I,WAJA;AAAA,E,aAWAA,I,WAXA;AAAA,E,aAYAA,I,WAZA;AAAA,E,aAiBAD,M,WAjBA;AAAA,E,aAiBQA,M,WAjBR;AAAA,E,aAqBAE,c,WArBA;AAAA,E,aAiCEA,c,WAjCF;AAAA,E,aAwCMA,c,WAxCN;AAAA,E,aAkDuCA,c,WAlDvC;AAAA,E,aAuDuCA,c,WAvDvC;AAAA,E,aA4DuCA,c,WA5DvC;AAAA,E,aAkEyCA,c,WAlEzC;AAAA,E,aAuEyCA,c,WAvEzC;AAAA,E,aA4EyCA,c,WA5EzC;AAAA;AAAA","file":"CardScroll.module.css.d.ts","sourceRoot":""}

package/src/components/CardScroll/CardScroll.tsx

@@ -24,11 +24,11 @@ export interface CardScrollProps
    */
   size?: 's' | 'm' | 'l' | false;
   /**
-   * Добавляет отступы по краям слева и справа
+   * Добавляет отступы по краям слева и справа.
    */
   padding?: boolean;
   /**
-   * Позволяет поменять тег используемый для обертки над карточками
+   * Позволяет поменять тег используемый для обертки над карточками.
    */
   CardsListComponent?: React.ElementType;
 }

package/src/components/CarouselBase/Bullets.tsx

@@ -1,11 +1,12 @@
-import * as React from 'react';
+/* eslint-disable jsdoc/require-jsdoc */
+
 import { classNames } from '@vkontakte/vkjs';
 import { type BaseGalleryProps } from './types';
 import styles from './CarouselBase.module.css';
 
 export interface BulletsTestIds {
   /**
-   * Передает атрибут `data-testid` для bullets
+   * Передает атрибут `data-testid` для bullets.
    */
   bulletTestId?: (index: number, active: boolean) => string;
 }
@@ -21,7 +22,7 @@ const stylesBullets = {
   light: styles.bulletsLight,
 };
 
-export const Bullets: React.FC<BulletsProps> = ({ bullets, slideIndex, count, bulletTestId }) => {
+export const Bullets = ({ bullets, slideIndex, count, bulletTestId }: BulletsProps) => {
   return (
     <div aria-hidden className={classNames(styles.bullets, stylesBullets[bullets])}>
       {Array.from({ length: count }).map((_, index) => (

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./CarouselBase.module.css"],"names":["host","viewport","layer","draggable","slide","customWidth","bullets","bulletsDark","bullet","bulletsLight","bulletActive","arrow","arrowAreaStretch","arrowAreaFit","arrowStart","arrowEnd"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAMAC,U,WANA;AAAA,E,aAYAC,O,WAZA;AAAA,E,aAqBAC,W,WArBA;AAAA,E,aAqBWD,O,WArBX;AAAA,E,aAyBAA,O,WAzBA;AAAA,E,aA6BAE,O,WA7BA;AAAA,E,aAoCAC,a,WApCA;AAAA,E,aAoCaD,O,WApCb;AAAA,E,aAyCAA,O,WAzCA;AAAA,E,aA8CAE,S,WA9CA;AAAA,E,aAyDAC,a,WAzDA;AAAA,E,aAyDaC,Q,WAzDb;AAAA,E,aA6DAC,c,WA7DA;AAAA,E,aA6DcD,Q,WA7Dd;AAAA,E,aAiEAA,Q,WAjEA;AAAA,E,aA0EAE,c,WA1EA;AAAA,E,aA8EAC,O,WA9EA;AAAA,E,aAmFAA,O,WAnFA;AAAA,E,aAmFMC,kB,WAnFN;AAAA,E,aAuFAD,O,WAvFA;AAAA,E,aAuFME,c,WAvFN;AAAA,E,aA8FAC,Y,WA9FA;AAAA,E,aAkGAC,U,WAlGA;AAAA,E,aAsGAf,M,WAtGA;AAAA,E,aAsGYW,O,WAtGZ;AAAA,E,aA0GAX,M,WA1GA;AAAA,E,aA0GMW,O,WA1GN;AAAA;AAAA","file":"CarouselBase.module.css.d.ts","sourceRoot":""}

package/src/components/CarouselBase/CarouselBase.tsx

@@ -156,7 +156,7 @@ export const CarouselBase = ({
   const checkShiftOutOfBoundsFromEnd = (shiftX: number, slides: GallerySlidesState[]) => {
     /**
      * Поскольку при `align="center"` слайды сдвинуты, прежде чем рассчитать крайнюю правую точку,
-     * нужно вычесть сдвиг слайдов
+     * нужно вычесть сдвиг слайдов.
      */
     const firstSlideShift =
       align === 'center'
@@ -177,7 +177,7 @@ export const CarouselBase = ({
     animationFrameRef.current = requestAnimationFrame(() => {
       /**
        * Для бесконечной галереи проверяем, что при dnd мы прокрутили левее, чем первый слайд,
-       * чтобы сбросить `shiftXCurrentRef`
+       * чтобы сбросить `shiftXCurrentRef`.
        */
       if (looped && checkShiftOutOfBoundsFromStart(shiftX, snaps)) {
         const firstSnap = revertRtlValue(snaps[0], isRtl);
@@ -187,7 +187,7 @@ export const CarouselBase = ({
 
       /**
        * Для бесконечной галереи проверяем, что при dnd мы прокрутили правее, чем последний слайд,
-       * чтобы правильно пересчитать `shiftXCurrentRef`
+       * чтобы правильно пересчитать `shiftXCurrentRef`.
        */
       if (looped && checkShiftOutOfBoundsFromEnd(shiftX, slides)) {
         shiftXCurrentRef.current = Math.abs(shiftXDeltaRef.current) + snaps[0];
@@ -338,7 +338,7 @@ export const CarouselBase = ({
     /**
      * Переключаемся с последнего элемента на первый
      * Для корректной анимации мы прокручиваем последний слайд на всю длину (shiftX) "вперед"
-     * В конце анимации при отрисовке следующего кадра задаем всем слайдам начальные значения
+     * В конце анимации при отрисовке следующего кадра задаем всем слайдам начальные значения.
      */
     if (indent === snaps[0] && fromLastToFirst) {
       const endEdge = revertRtlValue(
@@ -363,7 +363,7 @@ export const CarouselBase = ({
       /**
        * Переключаемся с первого слайда на последний
        * Для корректной анимации сначала задаем первым видимым слайдам смещение
-       * В следующем кадре начинаем анимация прокрутки "назад"
+       * В следующем кадре начинаем анимация прокрутки "назад".
        */
     } else if (indent === snaps[snaps.length - 1] && shiftXCurrentRef.current === snaps[0]) {
       startPoint = indent - revertRtlValue(slides[slides.length - 1].width, isRtl);
@@ -380,7 +380,7 @@ export const CarouselBase = ({
         });
       });
       /**
-       * Если не обработаны `corner`-кейсы выше, то просто проигрываем анимацию смещения
+       * Если не обработаны `corner`-кейсы выше, то просто проигрываем анимацию смещения.
        */
     } else {
       addToAnimationQueue(() => {

package/src/components/CarouselBase/CarouselViewPort.tsx

@@ -1,4 +1,5 @@
 'use client';
+/* eslint-disable jsdoc/require-jsdoc */
 
 import * as React from 'react';
 import { type HasChildren, type HasRootRef } from '../../types';
@@ -16,7 +17,7 @@ type GalleryViewPortProps = Pick<BaseGalleryProps, 'slideWidth' | 'slideTestId'>
     layerRef?: React.Ref<HTMLDivElement>;
   };
 
-export const CarouselViewPort: React.FC<GalleryViewPortProps> = ({
+export const CarouselViewPort = ({
   slideTestId,
   slideWidth,
   onStart,
@@ -26,7 +27,7 @@ export const CarouselViewPort: React.FC<GalleryViewPortProps> = ({
   layerRef,
   children,
   setSlideRef,
-}) => {
+}: GalleryViewPortProps) => {
   return (
     <Touch
       className={styles.viewport}

package/src/components/CarouselBase/ScrollArrows.tsx

@@ -1,4 +1,5 @@
 'use client';
+/* eslint-disable jsdoc/require-jsdoc */
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
@@ -24,11 +25,11 @@ export const getArrowClassName = (
 
 export interface ScrollArrowsTestIds {
   /**
-   * Передает атрибут `data-testid` для кнопки перехода к следующему слайду
+   * Передает атрибут `data-testid` для кнопки перехода к следующему слайду.
    */
   nextArrowTestId?: string;
   /**
-   * Передает атрибут `data-testid` для кнопки перехода к предыдущему слайду
+   * Передает атрибут `data-testid` для кнопки перехода к предыдущему слайду.
    */
   prevArrowTestId?: string;
 }
@@ -43,7 +44,7 @@ interface ScrollArrowsProps
   onSlideRight: (e: React.MouseEvent) => void;
 }
 
-export const ScrollArrows: React.FC<ScrollArrowsProps> = ({
+export const ScrollArrows = ({
   hasPointer,
   canSlideLeft,
   canSlideRight,
@@ -54,7 +55,7 @@ export const ScrollArrows: React.FC<ScrollArrowsProps> = ({
   arrowAreaHeight = 'stretch',
   nextArrowTestId,
   prevArrowTestId,
-}) => {
+}: ScrollArrowsProps) => {
   return showArrows && hasPointer ? (
     <>
       {canSlideLeft && (

package/src/components/CarouselBase/helpers.ts

@@ -1,3 +1,4 @@
+/* eslint-disable jsdoc/require-jsdoc */
 import { getRequiredValueByKey } from '../../helpers/getValueByKey';
 import { type AlignType } from '../../types';
 import { SLIDE_THRESHOLD } from './constants';
@@ -89,7 +90,7 @@ export function calculateIndent({
 }
 
 /**
- * Вычисляем индексы слайдов, которые необходимо смещать
+ * Вычисляем индексы слайдов, которые необходимо смещать.
  */
 export function getShiftedIndexes(
   direction: 1 | -1,
@@ -150,7 +151,7 @@ function calculateLoopPoints(
 }
 
 /**
- * Вычисляем "ключевые" точки, на которых должно происходить смещение слайдов
+ * Вычисляем "ключевые" точки, на которых должно происходить смещение слайдов.
  */
 export function getLoopPoints(
   slidesManager: SlidesManagerState,

package/src/components/CarouselBase/types.ts

@@ -1,3 +1,4 @@
+/* eslint-disable jsdoc/require-jsdoc */
 import type * as React from 'react';
 import type { HasAlign, HasRef, HTMLAttributesWithRootRef } from '../../types';
 import type { ScrollArrowProps } from '../ScrollArrow/ScrollArrow';
@@ -22,55 +23,55 @@ export interface LayoutState {
 
 export interface LoopPoint {
   /**
-   * Индекс слайда
+   * Индекс слайда.
    */
   index: number;
   /**
-   * Функция, которая по текущему сдвигу галереи определяет нужный сдвиг слайда
+   * Функция, которая по текущему сдвигу галереи определяет нужный сдвиг слайда.
    */
   target: (this: void, location: number) => void;
 }
 
 export interface ControlElementsState {
   /**
-   * Отвечает за отображение стрелки влево
+   * Отвечает за отображение стрелки влево.
    */
   canSlideLeft: boolean;
   /**
-   * Отвечает за отображение стрелки вправо
+   * Отвечает за отображение стрелки вправо.
    */
   canSlideRight: boolean;
   /**
-   * Возможность листать слайды drag'ом
+   * Возможность листать слайды drag'ом.
    */
   isDraggable: boolean;
 }
 
 export interface SlidesManagerState {
   /**
-   * Общая ширина всех слайдов
+   * Общая ширина всех слайдов.
    */
   contentSize: number;
   /**
    * Массив с пограничными точками слайдов, которые необходимо смещать, чтобы они всегда были в области видимости
    * (пример: для последнего слайда это n-первых слайдов, необходимых для заполнения оставшейся ширины,
-   * или для первого слайда это n-последних слайдов при выравнивании по центру)
+   * или для первого слайда это n-последних слайдов при выравнивании по центру).
    */
   loopPoints: LoopPoint[];
   /**
-   * Массив с правыми границами слайдов
+   * Массив с правыми границами слайдов.
    */
   snaps: number[];
   /**
-   * Ширина видимой области слайдов
+   * Ширина видимой области слайдов.
    */
   viewportOffsetWidth: number;
   /**
-   * Массив слайдов с координатой начала слайда и шириной
+   * Массив слайдов с координатой начала слайда и шириной.
    */
   slides: GallerySlidesState[];
   /**
-   * Все слайды видимы без скрола
+   * Все слайды видимы без скрола.
    */
   isFullyVisible: boolean;
   min: number | null;
@@ -91,45 +92,46 @@ export interface BaseGalleryProps
   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`
+   * Размер активной зоны стрелок (в пикселях).
+   * Определяет область вокруг стрелок, реагирующую на взаимодействие пользователя. В дизайне свойство называется `arrowArea`.
    */
   arrowAreaHeight?: 'stretch' | 'fit';
   hasPointer?: boolean;
   arrowSize?: ScrollArrowProps['size'];
   /**
-   * Текст для кнопки-стрелки влево (назад). Делает ее доступной для ассистивных технологий
+   * Текст для кнопки-стрелки влево (назад). Делает ее доступной для ассистивных технологий.
    */
   arrowPrevLabel?: string;
   /**
-   * Текст для кнопки-стрелки вправо (вперед). Делает ее доступной для ассистивных технологий
+   * Текст для кнопки-стрелки вправо (вперед). Делает ее доступной для ассистивных технологий.
    */
   arrowNextLabel?: string;
   /**
-   * Передает атрибут `data-testid` для слайда
+   * Передает атрибут `data-testid` для слайда.
    */
   slideTestId?: (index: number) => string;
   /**
-   * Включает зацикленность слайдов
+   * Включает зацикленность слайдов.
    */
   looped?: boolean;
   /**
    * Тип источника для отслеживания размера:
    * - `window`: пересчет позиции слайдов будет происходить при изменении размеров `window`
-   * - `element`: пересчет позиции слайдов будет происходить при изменении размеров компонента
+   * - `element`: пересчет позиции слайдов будет происходить при изменении размеров компонента.
    */
   resizeSource?: 'window' | 'element';
 }

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./Cell.module.css"],"names":["host","dragging","checkbox","dragger","controlNoBefore","content","removable","ios"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,U,WAJA;AAAA,E,aASAC,U,WATA;AAAA,E,aAUAC,S,WAVA;AAAA,E,aAeAD,U,WAfA;AAAA,E,aAmBAC,S,WAnBA;AAAA,E,aA0BAA,S,WA1BA;AAAA,E,aA0BQC,iB,WA1BR;AAAA,E,aA8BAA,iB,WA9BA;AAAA,E,aAmCAC,S,WAnCA;AAAA,E,aAwCAC,W,WAxCA;AAAA,E,aAwCWD,S,WAxCX;AAAA,E,aA+CAC,W,WA/CA;AAAA,E,aAoDAA,W,WApDA;AAAA,E,aA6DAC,K,WA7DA;AAAA,E,aA6DKJ,S,WA7DL;AAAA,E,aAiEAI,K,WAjEA;AAAA,E,aAiEKL,U,WAjEL;AAAA,E,aAqEAK,K,WArEA;AAAA,E,aAqEKH,iB,WArEL;AAAA,E,aA0EAG,K,WA1EA;AAAA,E,aA0EID,W,WA1EJ;AAAA,E,aA0EeD,S,WA1Ef;AAAA,E,aAiFAE,K,WAjFA;AAAA,E,aAiFID,W,WAjFJ;AAAA,E,aAuFAC,K,WAvFA;AAAA,E,aAuFID,W,WAvFJ;AAAA,E,aAgGiCN,M,WAhGjC;AAAA;AAAA","file":"Cell.module.css.d.ts","sourceRoot":""}