@vkontakte/vkui 8.0.2 → 8.1.1

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -47,19 +47,19 @@ export type CalendarHeaderTestsProps = {
   /**
    * Передает атрибут `data-testid` для дропдауна выбора месяца в заголовке календаря.
    */
-  monthDropdownTestId?: string | ((monthIndex: number) => string);
+  monthDropdownTestId?: string | ((monthIndex: number) => string) | undefined;
   /**
    * Передает атрибут `data-testid` для дропдауна выбора года в заголовке календаря.
    */
-  yearDropdownTestId?: string | ((year: number) => string);
+  yearDropdownTestId?: string | ((year: number) => string) | undefined;
   /**
    * Передает атрибут `data-testid` для кнопки перехода к следующему месяцу в заголовке календаря.
    */
-  nextMonthButtonTestId?: string;
+  nextMonthButtonTestId?: string | undefined;
   /**
    * Передает атрибут `data-testid` для кнопки перехода к предыдущему месяцу в заголовке календаря.
    */
-  prevMonthButtonTestId?: string;
+  prevMonthButtonTestId?: string | undefined;
 };
 
 export interface CalendarHeaderProps
@@ -72,55 +72,55 @@ export interface CalendarHeaderProps
   /**
    * Скрывает иконку для переключения на предыдущий месяц.
    */
-  prevMonthHidden?: boolean;
+  prevMonthHidden?: boolean | undefined;
   /**
    * Скрывает иконку для переключения на следующий месяц.
    */
-  nextMonthHidden?: boolean;
+  nextMonthHidden?: boolean | undefined;
   /**
    * Отключает селекторы выбора месяца/года.
    */
-  disablePickers?: boolean;
+  disablePickers?: boolean | undefined;
   /**
    * `aria-label` для кнопки предыдущего месяца.
    */
-  prevMonthLabel?: string;
+  prevMonthLabel?: string | undefined;
   /**
    * `aria-label` для кнопки следующего месяца.
    */
-  nextMonthLabel?: string;
+  nextMonthLabel?: string | undefined;
   /**
    * `aria-label` для селектора месяца.
    */
-  changeMonthLabel?: string;
+  changeMonthLabel?: string | undefined;
   /**
    * `aria-label` для селектора года.
    */
-  changeYearLabel?: string;
+  changeYearLabel?: string | undefined;
   /**
    * Кастомная иконка для кнопки предыдущего месяца.
    */
-  prevMonthIcon?: React.ReactNode;
+  prevMonthIcon?: React.ReactNode | undefined;
   /**
    * Кастомная иконка для кнопки следующего месяца.
    */
-  nextMonthIcon?: React.ReactNode;
+  nextMonthIcon?: React.ReactNode | undefined;
   /**
    * Дополнительные свойства для кнопки предыдущего месяца.
    */
-  prevMonthProps?: ArrowMonthProps;
+  prevMonthProps?: ArrowMonthProps | undefined;
   /**
    * Дополнительные свойства для кнопки следующего месяца.
    */
-  nextMonthProps?: ArrowMonthProps;
+  nextMonthProps?: ArrowMonthProps | undefined;
   /**
    * Функция для проверки блокировки месяца.
    */
-  isMonthDisabled?: (monthNumber: number, year?: number) => boolean;
+  isMonthDisabled?: ((monthNumber: number, year?: number) => boolean) | undefined;
   /**
    * Функция для проверки блокировки года.
    */
-  isYearDisabled?: (yearNumber: number) => boolean;
+  isYearDisabled?: ((yearNumber: number) => boolean) | undefined;
   /**
    * Обработчик изменения отображаемой даты.
    */
@@ -128,11 +128,11 @@ export interface CalendarHeaderProps
   /**
    * Нажатие на кнопку переключения на следующий месяц.
    */
-  onNextMonth?: () => void;
+  onNextMonth?: (() => void) | undefined;
   /**
    * Нажатие на кнопку переключения на предыдущий месяц.
    */
-  onPrevMonth?: () => void;
+  onPrevMonth?: (() => void) | undefined;
 }
 
 export const CalendarHeader = ({

package/src/components/CalendarRange/CalendarRange.tsx

@@ -35,11 +35,11 @@ export type CalendarRangeTestsProps = CalendarDaysTestsProps & {
   /**
    * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в левой части.
    */
-  leftPartHeaderTestsData?: CalendarHeaderTestsProps;
+  leftPartHeaderTestsData?: CalendarHeaderTestsProps | undefined;
   /**
    * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в правой части.
    */
-  rightPartHeaderTestsData?: CalendarHeaderTestsProps;
+  rightPartHeaderTestsData?: CalendarHeaderTestsProps | undefined;
 };
 
 export interface CalendarRangeProps
@@ -58,25 +58,25 @@ export interface CalendarRangeProps
   /**
    * Текущий выбранный промежуток.
    */
-  value?: DateRangeType | null;
+  value?: DateRangeType | null | undefined;
   /**
    * Начальный промежуток при монтировании.
    */
-  defaultValue?: DateRangeType | null;
+  defaultValue?: DateRangeType | null | undefined;
   /**
    * Запрещает выбор даты в прошлом.
    * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.
    */
-  disablePast?: boolean;
+  disablePast?: boolean | undefined;
   /**
    * Запрещает выбор даты в будущем.
    * Применяется, если не задано `shouldDisableDate`.
    */
-  disableFuture?: boolean;
+  disableFuture?: boolean | undefined;
   /**
    * Отключает селекторы выбора месяца/года.
    */
-  disablePickers?: boolean;
+  disablePickers?: boolean | undefined;
   /**
    * `aria-label` для изменения дня.
    *
@@ -86,23 +86,23 @@ export interface CalendarRangeProps
    * Теперь этот контейнер является таблицей (с помощью role="grid") и
    * в aria-label рендерится текущий открытый в календаре месяц и год.
    */
-  changeDayLabel?: string; // TODO [>=9]: удалить неиспользуемое свойство
+  changeDayLabel?: string | undefined; // TODO [>=9]: удалить неиспользуемое свойство
   /**
    * День недели, с которого начинается неделя.
    */
-  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
   /**
    * Обработчик изменения выбранного промежутка.
    */
-  onChange?: (value: DateRangeType) => void;
+  onChange?: ((value: DateRangeType) => void) | undefined;
   /**
    * Функция для проверки запрета выбора даты.
    */
-  shouldDisableDate?: (value: Date) => boolean;
+  shouldDisableDate?: ((value: Date) => boolean) | undefined;
   /**
    * @deprecated Since 7.3.0. Будет удалeно в **VKUI v9**.
    */
-  onClose?: () => void; // TODO [>=9]: удалить неиспользуемое свойство
+  onClose?: (() => void) | undefined; // TODO [>=9]: удалить неиспользуемое свойство
 }
 
 const getIsDaySelected = (day: Date, value?: DateRangeType | null) => {

package/src/components/CalendarTime/CalendarTime.tsx

@@ -14,38 +14,38 @@ export type CalendarTimeTestsProps = {
   /**
    * Передает атрибут `data-testid` для дропдауна выбора часа в календаре.
    */
-  hoursTestId?: string;
+  hoursTestId?: string | undefined;
   /**
    * Передает атрибут `data-testid` для дропдауна выбора минут в календаре.
    */
-  minutesTestId?: string;
+  minutesTestId?: string | undefined;
   /**
    * Передает атрибут `data-testid` для кнопки "Готово" в календаре.
    */
-  doneButtonTestId?: string;
+  doneButtonTestId?: string | undefined;
 };
 
 export type CalendarDoneButtonProps = {
   /**
    * Кастомное отображение кнопки `"Done"`.
    */
-  DoneButton?: React.ComponentType<ButtonProps>;
+  DoneButton?: React.ComponentType<ButtonProps> | undefined;
   /**
    * Текст отображаемый в кнопке `"Done"`.
    */
-  doneButtonText?: string;
+  doneButtonText?: string | undefined;
   /**
    * Управление отображением кнопки `"Done"`.
    */
-  doneButtonShow?: boolean;
+  doneButtonShow?: boolean | undefined;
   /**
    * Блокировка взаимодействия с кнопкой "Done".
    */
-  doneButtonDisabled?: boolean;
+  doneButtonDisabled?: boolean | undefined;
   /**
    * Обработки нажатия на кнопку `"Done"`.
    */
-  onDoneButtonClick?: () => void;
+  onDoneButtonClick?: (() => void) | undefined;
 };
 
 export interface CalendarTimeProps extends CalendarTimeTestsProps, CalendarDoneButtonProps {
@@ -56,27 +56,27 @@ export interface CalendarTimeProps extends CalendarTimeTestsProps, CalendarDoneB
   /**
    * Текст выпадающего списка с выбором часов. Делает его доступным для ассистивных технологий.
    */
-  changeHoursLabel?: string;
+  changeHoursLabel?: string | undefined;
   /**
    * Текст выпадающего списка с выбором минут. Делает его доступным для ассистивных технологий.
    */
-  changeMinutesLabel?: string;
+  changeMinutesLabel?: string | undefined;
   /**
    * Обработчик изменения времени.
    */
-  onChange?: (value: Date) => void;
+  onChange?: ((value: Date) => void) | undefined;
   /**
    * Функция установки часа (для таймзонно-зависимого календаря).
    */
-  setHours?: (date: Date, hours: number) => Date;
+  setHours?: ((date: Date, hours: number) => Date) | undefined;
   /**
    * Функция установки минут (для таймзонно-зависимого календаря).
    */
-  setMinutes?: (date: Date, minutes: number) => Date;
+  setMinutes?: ((date: Date, minutes: number) => Date) | undefined;
   /**
    * Функция для проверки блокировки выбора даты и времени.
    */
-  isDayDisabled?: (day: Date, withTime?: boolean) => boolean;
+  isDayDisabled?: ((day: Date, withTime?: boolean) => boolean) | undefined;
 }
 
 const hours: Array<{

package/src/components/CalendarTime/CalendarTimePicker.tsx

@@ -28,11 +28,11 @@ interface CalendarTimePickerProps extends Pick<SelectProps, 'onInputKeyDown'> {
     value: number;
     label: string;
   }>;
-  onChange?: (value: Date) => void;
+  onChange?: ((value: Date) => void) | undefined;
   setTime: (value: Date, time: number) => Date;
   inputRef: React.Ref<HTMLInputElement>;
-  inputLabel?: string;
-  inputTestId?: string;
+  inputLabel?: string | undefined;
+  inputTestId?: string | undefined;
 }
 /* eslint-enable jsdoc/require-jsdoc */
 

package/src/components/Card/Card.tsx

@@ -7,7 +7,7 @@ export interface CardProps extends HTMLAttributesWithRootRef<HTMLDivElement>, Ha
   /**
    * Внешний вид карточки.
    */
-  mode?: 'tint' | 'shadow' | 'outline' | 'outline-tint' | 'plain';
+  mode?: 'tint' | 'shadow' | 'outline' | 'outline-tint' | 'plain' | undefined;
 }
 
 /**

package/src/components/CardGrid/CardGrid.tsx

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

package/src/components/CardScroll/CardScroll.tsx

@@ -22,15 +22,15 @@ export interface CardScrollProps
   /**
    * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.
    */
-  size?: 's' | 'm' | 'l' | false;
+  size?: 's' | 'm' | 'l' | false | undefined;
   /**
    * Добавляет отступы по краям слева и справа.
    */
-  padding?: boolean;
+  padding?: boolean | undefined;
   /**
    * Позволяет поменять тег используемый для обертки над карточками.
    */
-  CardsListComponent?: React.ElementType;
+  CardsListComponent?: React.ElementType | undefined;
 }
 
 /**

package/src/components/CarouselBase/Bullets.tsx

@@ -8,7 +8,7 @@ export interface BulletsTestIds {
   /**
    * Передает атрибут `data-testid` для bullets.
    */
-  bulletTestId?: (index: number, active: boolean) => string;
+  bulletTestId?: ((index: number, active: boolean) => string) | undefined;
 }
 
 interface BulletsProps extends BulletsTestIds {

package/src/components/CarouselBase/CarouselViewPort.tsx

@@ -17,7 +17,7 @@ type GalleryViewPortProps = Pick<
     onMoveX: (e: CustomTouchEvent) => void;
     onEnd: (e: CustomTouchEvent) => void;
     setSlideRef: (slideRef: HTMLDivElement | null, slideIndex: number) => void;
-    layerRef?: React.Ref<HTMLDivElement>;
+    layerRef?: React.Ref<HTMLDivElement> | undefined;
     slidesContainerId: string;
   };
 

package/src/components/CarouselBase/ScrollArrows.tsx

@@ -30,11 +30,11 @@ export interface ScrollArrowsTestIds {
   /**
    * Передает атрибут `data-testid` для кнопки перехода к следующему слайду.
    */
-  nextArrowTestId?: string;
+  nextArrowTestId?: string | undefined;
   /**
    * Передает атрибут `data-testid` для кнопки перехода к предыдущему слайду.
    */
-  prevArrowTestId?: string;
+  prevArrowTestId?: string | undefined;
 }
 
 interface ScrollArrowsProps

package/src/components/CarouselBase/helpers.ts

@@ -181,8 +181,8 @@ export function getTargetIndex({
   currentShiftX: number;
   currentShiftXDelta: number;
   looped: boolean;
-  max?: number | null;
-  isRtl?: boolean;
+  max?: number | null | undefined;
+  isRtl?: boolean | undefined;
 }): number {
   max = max ?? 0;
   // Инвертируем значения смещения для RTL режима
@@ -225,7 +225,7 @@ export function getTargetIndex({
 }
 
 interface CalcMin extends Partial<LayoutState> {
-  isRtl?: boolean;
+  isRtl?: boolean | undefined;
   align: AlignType;
 }
 
@@ -253,7 +253,7 @@ export const calcMin = ({
 };
 
 interface CalcMax extends Partial<LayoutState> {
-  isRtl?: boolean;
+  isRtl?: boolean | undefined;
   isCenterAlign: boolean;
 }
 

package/src/components/CarouselBase/types.ts

@@ -15,7 +15,7 @@ export interface LayoutState {
   containerWidth: number;
   viewportOffsetWidth: number;
   layerWidth: number;
-  min?: number;
+  min?: number | undefined;
   max: number;
   slides: GallerySlidesState[];
   isFullyVisible: boolean;
@@ -94,71 +94,71 @@ export interface BaseGalleryProps
    *
    * Значение `"custom"` используется, если ширина у слайдов разная.
    */
-  slideWidth?: LiteralUnion<'custom', string> | number;
-  slideIndex?: number;
-  onDragStart?: CustomTouchEventHandler;
-  onDragEnd?: (e: CustomTouchEvent, targetIndex: number) => void;
-  onChange?: (current: number) => void;
+  slideWidth?: LiteralUnion<'custom' | undefined, string> | number | undefined;
+  slideIndex?: number | undefined;
+  onDragStart?: CustomTouchEventHandler | undefined;
+  onDragEnd?: ((e: CustomTouchEvent | undefined, targetIndex: number) => void) | undefined;
+  onChange?: ((current: number) => void) | undefined;
   /**
    * Будет вызвано при нажатии на кнопку-стрелку влево.
    */
-  onPrevClick?: (event: React.MouseEvent) => void;
+  onPrevClick?: ((event: React.MouseEvent) => void) | undefined;
   /**
    * Будет вызвано при нажатии на кнопку-стрелку вправо.
    */
-  onNextClick?: (event: React.MouseEvent) => void;
-  bullets?: 'dark' | 'light' | false;
+  onNextClick?: ((event: React.MouseEvent) => void) | undefined;
+  bullets?: 'dark' | 'light' | false | undefined;
   /**
    * Позволяет отключить реагирование на тач-события.
    */
-  dragDisabled?: boolean;
-  showArrows?: boolean;
+  dragDisabled?: boolean | undefined;
+  showArrows?: boolean | undefined;
   /**
    * Размер активной зоны стрелок (в пикселях).
    * Определяет область вокруг стрелок, реагирующую на взаимодействие пользователя. В дизайне свойство называется `arrowArea`.
    */
-  arrowAreaHeight?: 'stretch' | 'fit';
-  hasPointer?: boolean;
-  arrowSize?: ScrollArrowProps['size'];
+  arrowAreaHeight?: 'stretch' | 'fit' | undefined;
+  hasPointer?: boolean | undefined;
+  arrowSize?: ScrollArrowProps['size'] | undefined;
   /**
    * Текст для кнопки-стрелки влево (назад). Делает ее доступной для ассистивных технологий.
    */
-  arrowPrevLabel?: string;
+  arrowPrevLabel?: string | undefined;
   /**
    * Текст для кнопки-стрелки вправо (вперед). Делает ее доступной для ассистивных технологий.
    */
-  arrowNextLabel?: string;
+  arrowNextLabel?: string | undefined;
   /**
    * Текст для слайда. Делает его доступным для ассистивных технологий. Может быть функцией.
    * По умолчанию устанавливает `aria-label` вида `${Номер слайда} из ${Количества слайдов}`.
    */
-  slideLabel?: string | ((index: number, slidesCount: number) => string);
+  slideLabel?: string | ((index: number, slidesCount: number) => string) | undefined;
   /**
    * Описание роли для слайда, для лучше понимания пользователей скринридеров. По умолчанию - `Слайд`.
    */
-  slideRoleDescription?: string;
+  slideRoleDescription?: string | undefined;
   /**
    * Передает атрибут `data-testid` для слайда.
    */
-  slideTestId?: (index: number) => string;
+  slideTestId?: ((index: number) => string) | undefined;
   /**
    * Включает зацикленность слайдов.
    */
-  looped?: boolean;
+  looped?: boolean | undefined;
   /**
    * Тип источника для отслеживания размера:
    * - `window`: пересчет позиции слайдов будет происходить при изменении размеров `window`
    * - `element`: пересчет позиции слайдов будет происходить при изменении размеров компонента.
    */
-  resizeSource?: 'window' | 'element';
+  resizeSource?: 'window' | 'element' | undefined;
   /**
    * Длительность анимации смены слайда в миллисекундах.
    */
-  animationDuration?: number;
+  animationDuration?: number | undefined;
   /**
    * Функция для анимации.
    *
    * Принимает одно из предопределённых значений или параметры функции [cubic-bezier](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/cubic-bezier).
    */
-  animationEasing?: PredefinedEasingType | CubicBezierEasingType;
+  animationEasing?: PredefinedEasingType | CubicBezierEasingType | undefined;
 }

package/src/components/Cell/Cell.tsx

@@ -23,38 +23,38 @@ export interface CellProps
    * - "removable": добавляется кнопка для удаления
    * - "selectable": добавляется чекбокс для выбора.
    */
-  mode?: 'removable' | 'selectable';
+  mode?: 'removable' | 'selectable' | undefined;
   /**
    * В режиме перетаскивания ячейка перестает реагировать на нажатие, то есть при нажатии переданный `onClick` вызываться не будет.
    */
-  draggable?: boolean;
+  draggable?: boolean | undefined;
   /**
    * Имя для `input` в режиме `selectable`.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * В режиме `selectable` реагирует на входящие значения пропса `cheсked`, как зависящий напрямую от входящего значения.
    */
-  checked?: boolean;
+  checked?: boolean | undefined;
   /**
    * В режиме `selectable` реагирует на входящие значения пропса `defaultChecked` как неконтролируемый компонент.
    */
-  defaultChecked?: boolean;
+  defaultChecked?: boolean | undefined;
   /**
    * Обработчик, срабатывающий при завершении перетаскивания.
    * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В обработчике есть объект с полями `from` и `to`.
    * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице
    * есть рабочий пример с обработкой этих чисел и перерисовкой списка.
    */
-  onDragFinish?: (swappedItemRange: SwappedItemRange) => void;
+  onDragFinish?: ((swappedItemRange: SwappedItemRange) => void) | undefined;
   /**
    * Текст для кнопки перетаскивания ячейки.
    */
-  draggerLabel?: string;
+  draggerLabel?: string | undefined;
   /**
    * Передает атрибут `data-testid` для кнопки перетаскивания ячейки.
    */
-  draggerTestId?: string;
+  draggerTestId?: string | undefined;
 }
 
 /**

package/src/components/Cell/CellCheckbox/CellCheckbox.tsx

@@ -57,7 +57,7 @@ export interface CellCheckboxProps
   /**
    * Вид чекбокса. Если auto, то зависит от платформы.
    */
-  type?: 'auto' | 'circle' | 'square';
+  type?: 'auto' | 'circle' | 'square' | undefined;
 }
 
 export const CellCheckbox = ({

package/src/components/Cell/CellDragger/CellDragger.tsx

@@ -18,8 +18,8 @@ import styles from './CellDragger.module.css';
 interface CellDraggerProps
   extends UseDraggableProps,
     Omit<HTMLAttributesWithRootRef<HTMLElement>, keyof DraggableProps> {
-  disabled?: boolean;
-  onDragStateChange?: (dragging: boolean) => void;
+  disabled?: boolean | undefined;
+  onDragStateChange?: ((dragging: boolean) => void) | undefined;
 }
 
 export const CellDragger = ({