@vkontakte/vkui 8.0.1 → 8.1.0

package/src/components/ScreenSpinner/types.tsx

@@ -7,21 +7,21 @@ export type ScreenSpinnerProps = Omit<SpinnerProps, 'size'> &
     /**
      * Тип отображения спиннера.
      */
-    state?: 'loading' | 'cancelable' | 'done' | 'error' | 'custom';
+    state?: 'loading' | 'cancelable' | 'done' | 'error' | 'custom' | undefined;
     /**
      * Кастомная иконка, работает совместно со `state="custom"`.
      */
-    customIcon?: React.ReactNode;
+    customIcon?: React.ReactNode | undefined;
     /**
      * Внешний вид отображения спиннера.
      */
-    mode?: 'shadow' | 'overlay';
+    mode?: 'shadow' | 'overlay' | undefined;
     /**
      * Текст под иконкой.
      */
-    label?: React.ReactNode;
+    label?: React.ReactNode | undefined;
     /**
      * Используется при `state='cancelable'`. Делает доступным для ассистивных технологий.
      */
-    cancelLabel?: string;
+    cancelLabel?: string | undefined;
   };

package/src/components/ScrollArrow/ScrollArrow.tsx

@@ -47,15 +47,21 @@ export interface ScrollArrowProps
   /**
    * Размер стрелки.
    */
-  size?: 's' | 'm';
+  size?: 's' | 'm' | undefined;
   /**
    * Смещает иконку кнопки навигации по вертикали.
    */
-  offsetY?: number | string;
+  offsetY?: number | string | undefined;
+  /**
+   * Смещает иконку кнопки навигации по горизонтали.
+   * Для `direction="left"` применяется к `left` (в LTR) или `right` (в RTL).
+   * Для `direction="right"` применяется к `right` (в LTR) или `left` (в RTL).
+   */
+  offsetX?: number | string | undefined;
   /**
    * [a11y]: Используется для ассистивных технологий.
    */
-  label?: string;
+  label?: string | undefined;
 }
 
 /**
@@ -67,6 +73,7 @@ export interface ScrollArrowProps
 export const ScrollArrow = ({
   size = 'm',
   offsetY,
+  offsetX,
   direction,
   label: labelProp,
   children = <ArrowIcon size={size} />,
@@ -75,6 +82,19 @@ export const ScrollArrow = ({
   const textDirection = useConfigDirection();
   const label = labelProp ?? labelDirection[direction];
 
+  const iconStyle: React.CSSProperties = {};
+  if (offsetY) {
+    iconStyle.top = offsetY;
+  }
+  if (offsetX) {
+    const isRtl = textDirection === 'rtl';
+    if (direction === 'left') {
+      iconStyle[isRtl ? 'right' : 'left'] = offsetX;
+    } else if (direction === 'right') {
+      iconStyle[isRtl ? 'left' : 'right'] = offsetX;
+    }
+  }
+
   return (
     <RootComponent
       Component="button"
@@ -88,7 +108,10 @@ export const ScrollArrow = ({
       {...restProps}
     >
       {label && <VisuallyHidden>{label}</VisuallyHidden>}
-      <span className={styles.icon} style={offsetY ? { top: offsetY } : undefined}>
+      <span
+        className={styles.icon}
+        style={Object.keys(iconStyle).length > 0 ? iconStyle : undefined}
+      >
         {children}
       </span>
     </RootComponent>

package/src/components/Search/Search.tsx

@@ -27,7 +27,7 @@ const warn = warnOnce('Search');
 
 export type RenderIconButtonFn = (
   icon: React.ReactNode,
-  props?: Partial<IconButtonProps> & HasDataAttribute,
+  props?: (Partial<IconButtonProps> & HasDataAttribute) | undefined,
 ) => React.ReactElement;
 
 export interface SearchProps
@@ -57,74 +57,80 @@ export interface SearchProps
   /**
    * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.
    */
-  getRef?: React.Ref<HTMLInputElement>;
+  getRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * Свойства, которые можно прокинуть внутрь компонента:
    * - `root`: свойства для прокидывания в корень компонента;
    * - `input`: свойства для прокидывания в поле ввода;
    * - `clearButton`: свойства для прокидывания в кнопку очистки.
    */
-  slotProps?: {
-    root?: React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute;
-    input?: React.InputHTMLAttributes<HTMLInputElement> &
-      HasRootRef<HTMLInputElement> &
-      HasDataAttribute;
-    clearButton?: React.HTMLAttributes<HTMLElement> & HasRootRef<HTMLElement> & HasDataAttribute;
-  };
+  slotProps?:
+    | {
+        root?:
+          | (React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute)
+          | undefined;
+        input?: React.InputHTMLAttributes<HTMLInputElement> &
+          HasRootRef<HTMLInputElement> &
+          HasDataAttribute;
+        clearButton?: React.HTMLAttributes<HTMLElement> &
+          HasRootRef<HTMLElement> &
+          HasDataAttribute;
+      }
+    | undefined;
   /**
    * Only iOS. Текст кнопки "отмена", которая чистит текстовое поле и убирает фокус.
    */
-  after?: React.ReactNode;
+  after?: React.ReactNode | undefined;
   /**
    * Контент, отображаемый перед полем ввода.
    */
-  before?: React.ReactNode;
+  before?: React.ReactNode | undefined;
   /**
    * Иконка поиска. Может быть React-элементом или функцией, возвращающей элемент.
    */
-  icon?: React.ReactNode | ((renderFn: RenderIconButtonFn) => React.ReactNode);
+  icon?: React.ReactNode | ((renderFn: RenderIconButtonFn) => React.ReactNode) | undefined;
   /**
    * Обработчик нажатия на иконку поиска.
    */
-  onIconClick?: React.PointerEventHandler<HTMLElement>;
+  onIconClick?: React.PointerEventHandler<HTMLElement> | undefined;
   /**
    * Значение поля ввода по умолчанию.
    */
-  defaultValue?: string;
+  defaultValue?: string | undefined;
   /**
    * Текст для скринридеров, описывающий иконку поиска.
    */
-  iconLabel?: string;
+  iconLabel?: string | undefined;
   /**
    * Текст для скринридеров, описывающий кнопку очистки.
    */
-  clearLabel?: string;
+  clearLabel?: string | undefined;
   /**
    * @deprecated Since 8.1.0. Будет удалено в **VKUI v10**. Вместо этого используйте `slotProps={ clearButton: { 'data-testid': ... } }`.
    *
    * Передает атрибут `data-testid` для кнопки очистки.
    */
-  clearButtonTestId?: string;
+  clearButtonTestId?: string | undefined;
   /**
    * Удаляет отступы у компонента.
    */
-  noPadding?: boolean;
+  noPadding?: boolean | undefined;
   /**
    * Текст для кнопки Найти.
    */
-  findButtonText?: string;
+  findButtonText?: string | undefined;
   /**
    * Обработчик, при нажатии на кнопку "Найти".
    */
-  onFindButtonClick?: React.MouseEventHandler<HTMLElement>;
+  onFindButtonClick?: React.MouseEventHandler<HTMLElement> | undefined;
   /**
    * Передает атрибут `data-testid` для кнопки поиска.
    */
-  findButtonTestId?: string;
+  findButtonTestId?: string | undefined;
   /**
    * Скрывает кнопку очистки.
    */
-  hideClearButton?: boolean;
+  hideClearButton?: boolean | undefined;
 }
 
 /**

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -30,7 +30,7 @@ export interface SegmentedControlOptionInterface<
    * Вставляет элемент перед основным контентом.
    * Рекомендуется использовать только иконки с размером 20.
    */
-  before?: React.ReactNode;
+  before?: React.ReactNode | undefined;
   /**
    * Текст или React-элемент, отображаемый в качестве метки опции.
    */
@@ -50,23 +50,23 @@ export interface SegmentedControlProps<T extends SegmentedControlValue = Segment
   /**
    * Размер компонента.
    */
-  size?: 'm' | 'l';
+  size?: 'm' | 'l' | undefined;
   /**
    * Имя для input-элементов внутри компонента.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * Обработчик изменения выбранного значения.
    */
-  onChange?: (value: T) => void;
+  onChange?: ((value: T) => void) | undefined;
   /**
    * Текущее выбранное значение (для контролируемого компонента).
    */
-  value?: T;
+  value?: T | undefined;
   /**
    * Значение по умолчанию (для неконтролируемого компонента).
    */
-  defaultValue?: T;
+  defaultValue?: T | undefined;
 }
 
 const warn = warnOnce('SegmentedControl');

package/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx

@@ -13,9 +13,9 @@ export interface SegmentedControlOptionProps
   extends HasRootRef<HTMLLabelElement>,
     HasRef<HTMLInputElement>,
     HasChildren {
-  rootProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-  before?: React.ReactNode;
+  rootProps?: React.LabelHTMLAttributes<HTMLLabelElement> | undefined;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement> | undefined;
+  before?: React.ReactNode | undefined;
 }
 
 export const SegmentedControlOption = ({

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -26,15 +26,15 @@ export interface SelectMimicryProps
   /**
    * Включает многострочный режим отображения.
    */
-  multiline?: boolean;
+  multiline?: boolean | undefined;
   /**
    * Блокировка взаимодействия с компонентом.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Тип селекта, влияющий на внешний вид компонента.
    */
-  selectType?: SelectType;
+  selectType?: SelectType | undefined;
 }
 
 /**

package/src/components/SelectTypography/SelectTypography.tsx

@@ -4,7 +4,7 @@ import type { SelectType } from '../Select/Select';
 import { Text, type TextProps } from '../Typography/Text/Text';
 
 export interface SelectTypographyProps extends TextProps {
-  selectType?: SelectType;
+  selectType?: SelectType | undefined;
 }
 
 /**

package/src/components/SelectionControl/SelectionControl.tsx

@@ -27,7 +27,7 @@ export interface SelectionControlProps
   /**
    * Отключает отступы. При использовании этого свойства, значение по умолчанию для свойств `hoverMode` и `activeMode` становится `"opacity"`.
    */
-  noPadding?: boolean;
+  noPadding?: boolean | undefined;
 }
 
 /**

package/src/components/SelectionControl/SelectionControlLabel/SelectionControlLabel.tsx

@@ -15,8 +15,8 @@ const densityClassNames = {
 };
 
 interface SelectionControlLabelProps extends React.ComponentProps<'div'> {
-  description?: React.ReactNode;
-  titleAfter?: React.ReactNode;
+  description?: React.ReactNode | undefined;
+  titleAfter?: React.ReactNode | undefined;
 }
 
 export function SelectionControlLabel({

package/src/components/Separator/Separator.tsx

@@ -16,25 +16,25 @@ export interface SeparatorProps
   /**
    * Стиль отображения разделителя.
    */
-  appearance?: 'primary' | 'secondary' | 'primary-alpha';
+  appearance?: 'primary' | 'secondary' | 'primary-alpha' | undefined;
   /**
    * Добавляет стандартные отступы у разделителя.
    */
-  padding?: boolean;
+  padding?: boolean | undefined;
   /**
    * Направление отображения разделителя.
    */
-  direction?: 'horizontal' | 'vertical';
+  direction?: 'horizontal' | 'vertical' | undefined;
   /**
    * Размер контейнера, в который вложен разделитель.
    *
    * Принимает значения дизайн-системы, числовые значения и css-переменные.
    */
-  size?: SpacingSizeProp;
+  size?: SpacingSizeProp | undefined;
   /**
    * Выравнивание разделителя в контейнере.
    */
-  align?: 'start' | 'center' | 'end';
+  align?: 'start' | 'center' | 'end' | undefined;
 }
 
 const appearanceClassNames = {

package/src/components/SimpleCell/Chevron/Chevron.tsx

@@ -9,7 +9,7 @@ const iconSize = {
 };
 
 export interface ChevronProps extends Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
-  size?: 's' | 'm';
+  size?: 's' | 'm' | undefined;
 }
 
 export const Chevron = ({ size = 'm', ...restProps }: ChevronProps): React.ReactNode => {

package/src/components/SimpleCell/SimpleCell.tsx

@@ -22,62 +22,62 @@ export interface SimpleCellOwnProps extends HasComponent {
   /**
    * Иконка 28 или `<Avatar size={28|32|40|48|72} />`.
    */
-  before?: React.ReactNode;
+  before?: React.ReactNode | undefined;
   /**
    * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.
    */
-  badgeBeforeTitle?: React.ReactNode;
+  badgeBeforeTitle?: React.ReactNode | undefined;
   /**
    * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.
    */
-  badgeAfterTitle?: React.ReactNode;
+  badgeAfterTitle?: React.ReactNode | undefined;
   /**
    * Иконка 12. Добавится слева от текста `subtitle`.
    */
-  badgeBeforeSubtitle?: React.ReactNode;
+  badgeBeforeSubtitle?: React.ReactNode | undefined;
   /**
    * Иконка 12. Добавится справа от текста `subtitle`.
    */
-  badgeAfterSubtitle?: React.ReactNode;
+  badgeAfterSubtitle?: React.ReactNode | undefined;
   /**
    * Контейнер для текста справа от `children`.
    */
-  indicator?: React.ReactNode;
+  indicator?: React.ReactNode | undefined;
   /**
    * Дополнительная строка текста над `children`.
    */
-  overTitle?: React.ReactNode;
+  overTitle?: React.ReactNode | undefined;
   /**
    * Дополнительная строка текста под `children`.
    */
-  subtitle?: React.ReactNode;
+  subtitle?: React.ReactNode | undefined;
   /**
    * Дополнительная строка текста под `children` и `subtitle`.
    */
-  extraSubtitle?: React.ReactNode;
+  extraSubtitle?: React.ReactNode | undefined;
   /**
    * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.
    */
-  after?: React.ReactNode;
+  after?: React.ReactNode | undefined;
   /**
    * Блокировка взаимодействия с компонентом.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Управляет видимостью иконки шеврона `›`.
    *
    * - `auto` - добавляет шеврон справа только для платформы `ios`;
    * - `always` - всегда показывает шеврон.
    */
-  chevron?: 'auto' | 'always';
+  chevron?: 'auto' | 'always' | undefined;
   /**
    * Размер chevron.
    */
-  chevronSize?: 's' | 'm';
+  chevronSize?: 's' | 'm' | undefined;
   /**
    * Включает многострочный режим для отображения текста.
    */
-  multiline?: boolean;
+  multiline?: boolean | undefined;
 }
 
 export interface SimpleCellProps extends SimpleCellOwnProps, TappableOmitProps {}

package/src/components/SimpleGrid/SimpleGrid.tsx

@@ -35,13 +35,13 @@ export interface SimpleGridProps extends RootComponentProps<HTMLElement>, Layout
   /**
    * Количество колонок.
    */
-  columns?: number;
+  columns?: number | undefined;
   /**
    * Отступы между элементами.
    * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.
    * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.
    */
-  gap?: GapsProp;
+  gap?: GapsProp | undefined;
   /**
    * Управляет отступами вокруг контейнера
    * Значение `none` позволяет отключить отступы
@@ -49,19 +49,19 @@ export interface SimpleGridProps extends RootComponentProps<HTMLElement>, Layout
    * Значение `auto-inline` позволяет задать платформенные inline-отступы
    * Значение `auto-block` позволяет задать платформенные block-отступы.
    */
-  margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block';
+  margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block' | undefined;
   /**
    * Вместо задания количества колонок, можно указать минимальную ширину элементов.
    */
-  minColWidth?: number;
+  minColWidth?: number | undefined;
   /**
    * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`.
    */
-  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline' | undefined;
   /**
    * Возможность задать css-свойство `display`.
    */
-  display?: 'none' | 'grid' | 'inline-grid';
+  display?: 'none' | 'grid' | 'inline-grid' | undefined;
 }
 
 /**

package/src/components/Skeleton/Skeleton.tsx

@@ -107,27 +107,27 @@ export interface SkeletonProps
   /**
    * Начальный цвет анимации.
    */
-  colorFrom?: string;
+  colorFrom?: string | undefined;
 
   /**
    * Финальный цвет анимации.
    */
-  colorTo?: string;
+  colorTo?: string | undefined;
 
   /**
    * Выключает анимацию, в результате чего показывается только один цвет.
    */
-  noAnimation?: boolean;
+  noAnimation?: boolean | undefined;
 
   /**
    * Длительность анимации в секундах.
    */
-  duration?: number;
+  duration?: number | undefined;
 
   /**
    * Задерживает отрисовку элемента на заданное количество миллисекунд.
    */
-  visibilityDelay?: number;
+  visibilityDelay?: number | undefined;
 }
 
 /**

package/src/components/Slider/Slider.tsx

@@ -39,25 +39,25 @@ export interface SliderBaseProps
   /**
    * Минимальное значение слайдера.
    */
-  min?: number;
+  min?: number | undefined;
   /**
    * Максимальное значение слайдера.
    */
-  max?: number;
+  max?: number | undefined;
   /**
    * Шаг изменения значения слайдера.
    */
-  step?: number;
+  step?: number | undefined;
   /**
    * Блокировка взаимодействия с компонентом.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Тоже самое, что и `aria-label`, но на вход можно получать индекс текущего ползунка и в зависимости от этого выдавать разный текст.
    *
    * > Перебивает `aria-label`.
    */
-  getAriaLabel?: (index: number) => string;
+  getAriaLabel?: ((index: number) => string) | undefined;
   /**
    * В отличие от `aria-valuetext`, позволяет более гибко форматировать текст в зависимости от значения ползунка.
    *
@@ -65,42 +65,42 @@ export interface SliderBaseProps
    *
    * > Перебивает `aria-valuetext`.
    */
-  getAriaValueText?: (value: number, index: number) => string;
+  getAriaValueText?: ((value: number, index: number) => string) | undefined;
   /**
    * Включает отображение всплывающей подсказки при взаимодействии с ползунком.
    */
-  withTooltip?: boolean;
+  withTooltip?: boolean | undefined;
   /**
    * Размер ползунка.
    */
-  size?: 's' | 'm' | 'l';
+  size?: 's' | 'm' | 'l' | undefined;
   /**
    * Передает атрибут `data-testid` для первого ползунка.
    */
-  startThumbTestId?: string;
+  startThumbTestId?: string | undefined;
   /**
    * Передает атрибут `data-testid` для второго ползунка когда `multiple=true`.
    */
-  endThumbTestId?: string;
+  endThumbTestId?: string | undefined;
 }
 
 export interface SliderProps extends SliderBaseProps {
   /**
    * Флаг множественного выбора (должен быть false или не указан).
    */
-  multiple?: false;
+  multiple?: false | undefined;
   /**
    * Текущее значение слайдера.
    */
-  value?: number;
+  value?: number | undefined;
   /**
    * Значение слайдера по умолчанию.
    */
-  defaultValue?: number;
+  defaultValue?: number | undefined;
   /**
    * Обработчик изменения значения слайдера.
    */
-  onChange?: (value: number, event: CustomTouchEvent | React.ChangeEvent) => void;
+  onChange?: ((value: number, event: CustomTouchEvent | React.ChangeEvent) => void) | undefined;
 }
 
 export interface SliderMultipleProps extends SliderBaseProps {
@@ -111,15 +111,17 @@ export interface SliderMultipleProps extends SliderBaseProps {
   /**
    * Текущие значения слайдера в виде массива [начальное, конечное].
    */
-  value?: [number, number];
+  value?: [number, number] | undefined;
   /**
    * Значения слайдера по умолчанию в виде массива [начальное, конечное].
    */
-  defaultValue?: [number, number];
+  defaultValue?: [number, number] | undefined;
   /**
    * Обработчик изменения значений слайдера.
    */
-  onChange?: (value: [number, number], event: CustomTouchEvent | React.ChangeEvent) => void;
+  onChange?:
+    | ((value: [number, number], event: CustomTouchEvent | React.ChangeEvent) => void)
+    | undefined;
 }
 
 /**

package/src/components/Slider/SliderThumb/SliderThumb.tsx

@@ -20,13 +20,15 @@ import { TooltipBase } from '../../TooltipBase/TooltipBase';
 import styles from './SliderThumb.module.css';
 
 interface SliderThumbProps extends HasRootRef<HTMLSpanElement>, HasDataAttribute {
-  className?: string;
-  style?: React.CSSProperties;
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement> &
-    React.RefAttributes<HTMLInputElement> &
-    HasDataAttribute;
-  withTooltip?: boolean;
-  isActive?: boolean;
+  className?: string | undefined;
+  style?: React.CSSProperties | undefined;
+  inputProps?:
+    | (React.InputHTMLAttributes<HTMLInputElement> &
+        React.RefAttributes<HTMLInputElement> &
+        HasDataAttribute)
+    | undefined;
+  withTooltip?: boolean | undefined;
+  isActive?: boolean | undefined;
 }
 
 export const SliderThumb = ({